Home > Article > Web Front-end > How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)
How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)
- 青灯夜游Original
- 2018-10-18 10:58:048405browse
How to achieve image filter effect in css3? In fact, it is very simple to use the css3 filter attribute to achieve several filter effects. This article will introduce to you what filter effects can be achieved by the css3 filter attribute, and how to implement these image filter effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First, we create a demo, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter滤镜</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="demo">
<img src="How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)" / alt="How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)" >
</div>
</body>
</html>The effect is like this (without adding any filter effect):
 "153982614348611How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
Let’s take a look at the image filter effects that can be achieved by the css3 filter filter attribute:
1. The css3 image blur filter effect
only You need to add the following css code:
.demo img{
filter: blur(2px);/* 给图像设置高斯模糊，值越大越模糊 */
}Effect picture:
 "153982674373652How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
Considering the compatibility of the browser, we can add a statement:
.demo img{
-webkit-filter: blur(2px); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: blur(2px);/* 给图像设置高斯模糊 */
}2. css3 filter---brightness(%) sets the brightness of the image
.demo img{
-webkit-filter: brightness(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: brightness(50%);
/* 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；值是100%以上，则图像更亮*/
}Rendering:
 "153982821121221How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
.demo img{
-webkit-filter: brightness(150%);
filter: brightness(150%);
}Rendering:
3. css3 filter---contrast(%) sets the image contrast
.demo img{
-webkit-filter: contrast(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: contrast(50%);
/* 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。*/
}Rendering:
 "153982859616411How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
.demo img{
-webkit-filter: contrast(150%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: contrast(150%);
}Rendering:  "153982867690064How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
4. css3 filter---drop-shadow() sets the image shadow
.demo img{
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
/* 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。*/
}Rendering:
 "153982900520195How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
filter:drop-shadow(h-shadow v-shadow blur spread color);h-shadow: Sets the horizontal offset of the shadow. Negative values will cause the shadow to appear on the left side of the element. v-shadow: Sets the vertical offset of the shadow. Negative values will cause the shadow to appear above the element. blur: Set the blur. The larger the value, the blurrier it is, and the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the boundary of the shadow is very sharp). spread: Positive values will cause the shadow to expand and become larger, negative values will cause the shadow to shrink; if not set, the default is 0 (the shadow will be the same size as the element). Note: Webkit, and some other browsers do not support spread, and will not render if added. color: Set the shadow color; if not set, the color value is based on the browser.
5. css3 filter---grayscale(%) sets the grayscale of the image
.demo img{
-webkit-filter: grayscale(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: grayscale(100%);
/* 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。*/
}Rendering:
 "153982965892422How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
6. css3 filter---hue-rotate(deg) sets the image hue rotation
.demo img{
-webkit-filter: hue-rotate(90deg); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: hue-rotate(90deg);
/* 给图像应用色相旋转，值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈*/
}Rendering:  "153982993692826How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
7. css3 filter---invert(%) sets the inverse color of the image
.demo img{
-webkit-filter: invert(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: invert(100%);
/* 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。*/
}Rendering:
 "153983021563341How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
8. css3 filter---opacity(%) sets the image transparency
.demo img{
-webkit-filter: opacity(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: opacity(50%);
/* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。 */
}Rendering:  "153983071715556How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
9, css3 filter---saturate(%) sets the saturation
.demo img{
-webkit-filter: saturate(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: saturate(50%);
/* 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。*/
}Rendering:  "153983083495852How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
10. css3 filter---sepia(%) sets the image to brown (a retro old photo feel)
.demo img{
-webkit-filter: sepia(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: sepia50%);
/* 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。 */
}Rendering:  "153983098850477How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)")
CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Video Tutorial!
The above is the detailed content of How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation). For more information, please follow other related articles on the PHP Chinese website!