CSS3十大滤镜效果详解

AI_Ming2024-01-17 9:45

滤镜效果

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

css 复制代码 
filter:none|方法;

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

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

亮度：brightness()

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

语法：

css 复制代码 
filter:brightness(amount);

属性值

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

实例：

css 复制代码 
<!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>

运行结果

灰度：grayscale()

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

语法：

css 复制代码 
filter:grayscale(amount);

属性值

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

实例：

html 复制代码 
<!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>

运行结果

复古：sepia()

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

语法：

css 复制代码 
filter:sepia(amount);

属性值

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

实例：

html 复制代码 
<!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>

运行结果

反色：invert()

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

语法:

css 复制代码 
filter:invert(amount);

属性值

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

实例:

css 复制代码 
<!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>

运行结果

旋转：hue-rotate()

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

语法：

css 复制代码 
filter:hue-rotate(angle);

属性值

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

实例：

css 复制代码 
<!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>

运行结果

阴影：drop-shadow()

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

语法：

css 复制代码 
filter:drop-shadow(x-offset y-offset blur color);

属性值

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

实例：

css 复制代码 
<!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>

运行结果

透明度：opacity()

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

语法：

css 复制代码 
filter:opacity(amount);

属性值

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

实例：

css 复制代码 
<!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>

运行结果

模糊度：blur()

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

语法：

css 复制代码 
filter:blur(amount);

属性值

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

实例

html 复制代码 
<!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>

运行结果

对比度：contrast()

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

语法:

css 复制代码 
filter:contrast(amount);

属性值

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

实例:

html 复制代码 
<!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>

运行结果

饱和度：saturate()

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

语法：

css 复制代码 
filter:saturate(amount);

属性值

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

实例：

css 复制代码 
<!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>

运行结果

多种滤镜

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

语法

css 复制代码 
filter:brightness() grayscale() blur().....;

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

实例:

css 复制代码 
<!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>

运行结果

相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南