How to achieve image filter effect in css3? Filter attribute implementation (detailed picture and text explanation)-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-10-18 13:58:35

Original

8593 people have browsed it

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>

Copy after login

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

How 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);/* 给图像设置高斯模糊，值越大越模糊 */
}

Copy after login

Effect picture:

How 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);/* 给图像设置高斯模糊 */
}

Copy after login

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%以上，则图像更亮*/
}

Copy after login

Rendering:

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

.demo img{
   -webkit-filter: brightness(150%);
   filter: brightness(150%);
}

Copy after login

Rendering:

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

3. css3 filter---contrast(%) sets the image contrast

.demo img{
    -webkit-filter: contrast(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(50%);
    /* 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。*/
}

Copy after login

Rendering:

How 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%);
}

Copy after login

Rendering:

How 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));
     /* 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。*/
}

Copy after login

Rendering:

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

Instructions:

filter:drop-shadow(h-shadow v-shadow blur spread color);

Copy after login

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%图像无变化。*/
}

Copy after login

Rendering:

How 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的值相当于又绕一圈*/
}

Copy after login

Rendering:

How 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%之间，则是效果的线性乘子。*/
}

Copy after login

Rendering:

How 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%则图像无变化。 */
}

Copy after login

Rendering:

1How 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%的值是允许的，则有更高的饱和度。*/
}

Copy after login

Rendering:

1How 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%图像无变化。 */
}

Copy after login

Rendering:

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

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!