写文章
  1. 码农之家首页
  2. 前端教程

CSS3十大滤镜效果详解

我心飞翔 • • 前端教程 • 阅读 31

滤镜效果

类似于美颜相机、美图秀秀这样的美颜工具，能够让我们轻松地应用多种特效，例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。
但在CSS3的语法中，所有的这些视觉特效都是通过“filter”属性来快速实现的。
语法：

filter:none|方法;

filter属性值有以下10种，每一种都对应着一种滤镜效果。其中属性取值无效，那么会默认取值为none。除了特殊说明，属性取值如果是百分比值（如78%），那么该函数也接收小数（0.78）。

属性值 说明
none 表示不设置滤镜效果
brightness() 亮度
grayscale() 灰色
sepia() 复古
invert() 反色
hue-rotate() 旋转（色相）
drop-shadow() 阴影
opacity() 透明度
blur() 模糊度
contrast() 对比度
saturate() 饱和度

亮度：brightness()

概念：brightness()方法用来实现减弱或增强图片的亮度。

语法：

filter:brightness(amount);

属性值

取值为0%时就是完全黑色，值为100%就表示图像无变化。如果值在0%到100%之间表示减弱图片的亮度，值大于100%以上就表示增强图片的亮度。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>明亮</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				display:inline-block;
				width:230px;
				height:230px;
				margin:20px 20px;
			}
			.after{
				filter:brightness(2);
			}
		</style>
	</head>
	<body>
		<div class="before">
			<h2>之前</h2>
			<img src="../img/9.png" alt="">
		</div>
		<div class="after">
			<h2>现在</h2>
			<img src="../img/9.png" alt="">
		</div>
		
	</body>
</html>

运行结果

CSS3十大滤镜效果详解

灰度：grayscale()

概念：grayscale()方法可以用于将图片转换为灰度图像（黑白图像）。灰度滤镜就是将彩色图片转换成黑白图片。

语法：

filter:grayscale(amount);

属性值

值为0%时表示图形无变化。当值为100%时则表示将图像完全转换为灰度图像（黑白图像）。值为0%到100%之间的值会增加图片灰度程度。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>灰度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					width:230px;
					height:230px;
					margin:20px 20px;
				}
				.after{
					filter:grayscale(100%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/2.png" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/2.png" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

复古：sepia()

概念：sepia()方法用于实现将图像转换为深褐色。复古滤镜，也叫褐色滤镜。

语法：

filter:sepia(amount);

属性值

取值范围为0%~100%。其中，值为100%表示图像完全是深褐色的，值为0%时表示图像无变化。
如果值在0%到100%之间，值越大，变化就越增强。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复古</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after{
					filter:sepia(100%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

反色：invert()

概念：invert()方法是用来实现反色滤镜效果的。反色，指的是红、绿、蓝3个通道的像素取各自的相反值。

语法:

filter:invert(amount);

属性值

取值范围是0%到100%。其中，值为0%表示图像无变化，但值为100%则表示图像完全反转所有颜色。如果值在0%到100%之间，值越大，反转程序就越高。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>反色</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:invert(1);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

旋转：hue-rotate()

概念：hue-rotate()方法用来实现将应用色相旋转的滤镜效果。

语法：

filter:hue-rotate(angle);

属性值

angle值设定图像会被调整的色环角度值。angle值是一个度数,单位是deg(即“degree”)。其中，值为0deg表示不旋转，但值为360deg表示旋转360o，也就是相当于一个循环

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:hue-rotate(240deg);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

阴影：drop-shadow()

概念：drop-shadow()方法用来给图像添加阴影效果。

语法：

filter:drop-shadow(x-offset y-offset blur color);

属性值

属性值 说明
x-offset 必选值，定义水平阴影的偏移距离，可以使用负值。由于是W3C坐标系，因此x-offset值为正时，向右偏移；取值为负时，向左偏移。
y-offset 必选值，定义垂直阴影的偏移距离，可以使用负值。由于是W3C坐标系，因此y-offset值为正时，向下偏移；取值为负时，向上偏移。
blur 可选值，定义阴影的模糊半径，只能为正值。值越大，阴影就越大，也越模糊。
color 可选值，定义阴影的颜色。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阴影</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:drop-shadow(10px 10px 15px blue);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

透明度：opacity()

概念：opacity()方法用来给图像添加透明效果，也就是透明度滤镜效果。

语法：

filter:opacity(amount);

属性值

取值范围是0%~100%。其中，值为0%则是使图像完全透明，值为100%则是图像无变化。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>透明</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:opacity(60%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

模糊度：blur()

概念：blur()方法用来实现模糊度滤镜效果，将高斯模糊应用于输出图片，也就是马赛克。

语法：

filter:blur(amount);

属性值

amount的取值是一个像素值，单位是px，定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合；因此像素值越大，模糊效果会更加明显。值为0会使输入保持不变。该值为空则为0.

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模糊度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:blur(10px);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

对比度：contrast()

概念:contrast()方法用来调整输入图像的对比度。

语法:

filter:contrast(amount);

属性值

低于100%的值会降低对比度，高于100%的值会增加对比度。值为0%将创建完全灰色的图像，值为100%时不会有任何变化，值为200%时表示增强对比度为原先的2倍。该值为空时默认为1。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对比度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					/* filter:contrast(200%); */
					filter:contrast(3);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

饱和度：saturate()

概念：saturate()方法用于改变图像饱和度。

语法：

filter:saturate(amount);

属性值

低于100%的值会降低饱和度，高于100%的值会增加饱和度。值为0%则是完全不饱和，值为100%则表示图像无变化。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>饱和度</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
			
					/* filter:saturate(50%); */
					filter:saturate(300%);
					
					
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

多种滤镜

概念：如果想要为元素同时定义多种滤镜效果，两个值之间要用空格隔开。滤镜效果将按声明顺序依次应用。

语法

filter:brightness() grayscale() blur().....;

注意：滤镜属性值没有规定要按一定的顺序去排序，可以乱序排列。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多种滤镜效果</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
                    filter:opacity(0.5) blur(1px) sepia(0.3) drop-shadow(20px 10px 10px rgba(31,151,247,0.5));
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

CSS3十大滤镜效果详解

原文链接：https://juejin.cn/post/7324528599779688474 作者：小明的Fire计划

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2024年1月17日 上午10:31
下一篇 2024年1月17日 上午10:42

相关推荐

发表回复

登录后才能评论