How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)

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:

The effect is like this (without adding any filter effect):

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:

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:

.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:

##

.demo img{ -webkit-filter: contrast(150%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */ filter: contrast(150%); }

Rendering:

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:

Instructions:

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:

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:

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:

8. css3 filter---opacity(%) sets the image transparency

.demo img{ -webkit-filter: opacity(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */ filter: opacity(50%); /* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。 */ }

Rendering:

9, css3 filter---saturate(%) sets the saturation

.demo img{ -webkit-filter: saturate(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */ filter: saturate(50%); /* 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。*/ }

Rendering:

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:

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit

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!