JavaScript|你不知道的CSS属性-Filter（滤镜）
JavaScript|你不知道的CSS属性-Filter（滤镜）
问题描述
当在拍照、p图时，有一个东西必不可少那就是滤镜，适当地运用滤镜可以使图片更加的赏心悦目，而作为网页的美化技术来说，CSS同样也具有滤镜的属性。CSS 3 Filter属性就提供了相当于滤镜的模糊和改变元素颜色的功能，使图像产生更加绚丽多彩的效果。接下来就来学习一下CSS3的Filter属性。
具体内容
1滤镜属性简介
CSS滤镜的语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); |
|---|
CSS滤镜参数的含义如下表：
参数名称 | 效果 |
|---|---|
blur() | 设置图片的高斯模糊效果 |
brightness() | 设置图片的明暗度效果 |
contrast() | 设置图片的对比度 |
grayscale() | 将图片转化为灰度图像 |
drop-shadow() | 设置图片的一个阴影效果 |
hue-rotate() | 给图片应对色相旋转 |
invert() | 反转输入图像 |
opacity() | 转化图像的透明程度 |
saturate() | 转化图像的饱和度 |
sepia() | 将图像转化为深褐色 |
2 基本滤镜效果
接下来给大家介绍几个实用的滤镜效果语法。
2.1 高斯模糊（blur）滤镜
blur滤镜用于设置图片的高斯模糊效果。blur滤镜的语法格式如下：
filter : blur (px) |
|---|
其中px的值越大，图像就越模糊。
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>高斯模糊</title> <style type="text/css"> img{ width: 20%; height: auto; } .blur{ -webkit-filter: blur(4px); filter: blur(4px); } </style> </head> <body> 原图： <img src="img/xiaozhan.jpg" alt="原图" > 高斯模糊： <img src="img/xiaozhan.jpg" alt="高斯模糊"> </body></html> |
|---|
效果：
图1.1 高斯模糊效果图
2.2 明暗度（brightness）滤镜
brightness滤镜用于设置图片的明暗度效果。brightness滤镜的语法如下：
filter : brightness (%) |
|---|
当参数设置为0%时，图像会变成全黑；当参数为100%时图像无变化；当参数超过100%时图像会比原来还要亮。
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>高斯模糊</title> <style type="text/css"> img{ width: 20%; height: auto; } .a{ -webkit-filter: brightness(150%); filter: brightness(150%); } .b{ -webkit-filter: brightness(30%); filter: brightness(30%); } </style> </head> <body> 原图： <img src="img/xiaozhan.jpg" alt="原图" > 图像变亮： <img src="img/xiaozhan.jpg" alt="图像变亮"> 图像变暗： <img src="img/xiaozhan.jpg" alt="图像变暗"> </body></html> |
|---|
效果：
图2.2 明暗度滤镜效果图
2.3 对比度滤镜
contrast滤镜用于设置图像的对比度效果。其语法格式如下：
filter : contrast (%) |
|---|
当参数设置为0%时，图像会变成全黑；当参数为100%时图像无变化。
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>高斯模糊</title> <style type="text/css"> img{ width: 20%; height: auto; } .a{ -webkit-filter: contrast(150%); filter: contrast(150%); } .b{ -webkit-filter: contrast(30%); filter: contrast(30%); } </style> </head> <body> 原图： <img src="img/xiaozhan.jpg" alt="原图" > 图像变亮： <img src="img/xiaozhan.jpg" alt="图像变亮"> 图像变暗： <img src="img/xiaozhan.jpg" alt="图像变暗"> </body></html> |
|---|
效果：
图2.3 对比度滤镜效果
2.4 阴影（drop-shadow）滤镜
drop-shadow滤镜用于设置图像的阴影效果，使元素内容在页面上产生投影，从而实现立体的效果，其语法格式如下：
arrayObject.length; |
|---|
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>高斯模糊</title> <style type="text/css"> img{ width: 20%; height: auto; } .a{ -webkit-filter: drop-shadow(15px 15px 20px grey); filter: drop-shadow(15px 15px 20px grey); } .b{ -webkit-filter: drop-shadow(30px 30px 10px blue); filter: drop-shadow(30px 30px 10px blue); } </style> </head> <body> 原图： <img src="img/xiaozhan.jpg" alt="原图" > 灰色阴影： <img src="img/xiaozhan.jpg" alt="灰色阴影"> 蓝色阴影： <img src="img/xiaozhan.jpg" alt="蓝色阴影"> </body></html> |
|---|
效果：
图2.4 阴影滤镜效果
3 复合滤镜效果的使用
上面主要是介绍了一些基础的单个滤镜的效果，而综合的使用滤镜效果可以产生一些奇特的动画效果。接下来就来制作一个电闪雷鸣的动画效果吧，在此次的例子里面主要使用了明暗度滤镜、对比度滤镜和深褐色滤镜。
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动态效果</title> <style> body { text-align: center; } img { max-width: 100%; width:1000px; } img { -webkit-animation: haunted 4s infinite; animation: haunted 4s infinite; } @keyframes haunted{ 0% { -webkit-filter: brightness(20%); filter: brightness(20%); } 45% { -webkit-filter: brightness(20%); filter: brightness(20%); } 50% { -webkit-filter: sepia(1) contrast(2) brightness(200%); filter: sepia(1) contrast(2) brightness(200%); } 60% { -webkit-filter: sepia(1) contrast(2) brightness(200%); filter: sepia(1) contrast(2) brightness(200%); } 65% { -webkit-filter: brightness(20%); filter: brightness(20%); } 95% { -webkit-filter: brightness(20%); filter: brightness(20%); } 95% { -webkit-filter: brightness(400%); filter: brightness(400%); } } </style> </head> <body> <img src="../img/shandian.jpg"/> </body></html> |
|---|
效果：
图3.1 动态效果过程1
图3.2 动态效果过程2
图3.3 动态效果过程3
在上述代码中通过运用@keyframes来规定动画的规则。通过在不同时间点运用不同的滤镜来造成图片动态的效果。
结语
CSS3的滤镜的强大属性可以使图片更加美观，同时运用动画设置图片的复合滤镜也可以使图片动起来。虽然属性的效果可能比不上PS，但是运用的好的话也可以在节约很多空间下和P图的时间，在网页的制作上，可以把一张图片变成多张图片。
END
编 辑 | 王楠岚
责 编 | 杨金月
where2go 团队