原文链接：
/MR_LP/article/details/65443047
0.前言
注意：
若文章中发现图片无法加载，请移步作者其他博客。
*简书
*掘金
最近在用手机的过程中，发现苹果在非常多的地方都使用了模糊的效果。
高斯效果虽然炫酷，可是咱们身为前端人员，又该如何去模仿这个效果呢？
这时候我们就要说到 CSS 3 中的一个属性，Filter了。
1.Filter
CSS滤镜(filter)：
提供的图形特效，像模糊，锐化或元素变色。
过滤器通常被用于调整图片，背景和边界的渲染。
Filter的一些基础内容：
名称
说明
初始值
none
适用元素
所有元素;在SVG,它适用于容器元素不包括def元素和所有图形元素
继承性
不继承
适用效果
视觉处理
增添版本
CSS3
JS 语法
object.style.WebkitFilter="grayscale(100%)"
关于适用浏览器版本：
平时推荐大家还是用 Chrome 浏览器来查看效果吧。
除此之外，再补充一下在 MDN 上给出的兼容性说明。
出自之外，Filter虽然在属性介绍中说明是不继承的，但是它其实和Opacity非常类似，都会导致子级发生问题。
这时候我们就要用到另外一个内容，Filter()函数了。
但是，咱们还是循序渐进，先继续来看Filter吧。
在介绍了Filter的基础使用之后，我们接下来介绍一下它的属性。
属性名
属性介绍
填写方式
none
无效果
默认值
grayscale
灰度
百分比
sepia
褐色
百分比
saturate
饱和度
百分比
hue-rotate
色相旋转
deg
invert
反色
百分比
opacity
透明度
百分比
brightness
亮度
百分比
contrast
对比度
百分比
blur
模糊
px
drop-shadow
阴影
h-shadow v-shadow blur spread color
既然知道了都有哪些属性，那么我们接下来就来一起看看。
这些属性都是如何去使用的吧。
2.属性的书写
2.1 grayscale ：灰度
示例代码
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:grayscale(1);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
grayscale ：灰度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
灰度会将我们的照片进行灰白处理，其实说白了就是由原本的彩色照片变成 黑白照片而已。
需要注意：
值为100%则完全转为灰度图像，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。
若未设置，W3C说值默认是0，但是实际测试应为 100%。
2.2 sepia ： 褐色
示例代码
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:sepia(1);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
sepia ： 褐色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
sepia 是将图像转换为深褐色。
处理过后能实现一种类似于“老照片”的泛黄感觉。
除此之外，需要注意：
值为100%则完全是深褐色的，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。
若未设置，W3C说值默认是0，但是实际测试应为 100%。
2.3 saturate ：饱和度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:saturate(4);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
saturate ：饱和度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
saturate 是用于转换图像饱和度。
虽然转换成 0 的话，看上去实现效果和“灰度”差不多。
但是饱和度是可以设置超过原本图片色彩的。
除此之外，需要注意：
值为0%则是完全不饱和，值为100%则图像无变化。
其他值，则是效果的线性乘子。
超过100%的值是允许的，则有更高的饱和度。
若值未设置，值默认是1。
2.4 hue-rotate ：色相旋转
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:hue-rotate(90deg);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
hue-rotate ：色相旋转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
hue-rotate 是给图像应用色相旋转。
数值设定图像会被调整的色环角度值。
注意：
值为0deg，则图像无变化。
若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。
2.5 invert ：反色
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:invert(1);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
invert ：反色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
invert 是反转输入图像。
就像我们照相机的底片一样。
注意：
100%的价值是完全反转。
值为0%则图像无变化。
值在0%和100%之间，则是效果的线性乘子。
若值未设置，值默认是0。
2.6 透明度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:opacity(.2);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
opacity ：透明度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
opacity 是转化图像的透明程度。
注意：
值为0%则是完全透明，值为100%则图像无变化。
值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。
若值未设置，值默认是1。
该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
2.7 亮度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:brightness(2);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
brightness ：亮度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
brightness 是给图片应用一种线性乘法，使其看起来更亮或更暗。
注意：
如果值是0%，图像会全黑。值是100%，则图像无变化。
其他的值对应线性乘数效果。
值超过100%也是可以的，图像会比原来更亮。
如果没有设定值，默认是1。
2.8 contrast ：对比度
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:contrast(2);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
contrast ：对比度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
contrast 是调整图像的对比度。
注意：
值是0%的话，图像会全黑。
值是100%，图像不变。
值可以超过100%，意味着会运用更低的对比。
若没有设置值，默认是1。
2.9 blur ：模糊
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:blur(2px);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
blur ：模糊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
终于到重头戏了，模糊。
blur 是给图像设置高斯模糊。
“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
注意：
如果没有设定值，则默认是0；
这个参数可设置css长度值，但不接受百分比值。
2.10 drop-shadow ：阴影
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}
h3{
margin:0;
text-align:center;
font-size:40px;
}
drop-shadow ：阴影
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
drop-shadow 是给图像设置一个阴影效果。
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
函数接受(在CSS3背景中定义)类型的值，
除了”inset”关键字是不允许的。
该函数与已有的box-shadow box-shadow属性很相似；
不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
在这里带着大家回顾一下之前 box-shadow 的属性说明：
(必须)
这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
(可选)
这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
(可选)
查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
2.11 URL ：自定义 XML 文件
解释说明：
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.
引入方法：
.target { filter:url(#c1); }
.mydiv { filter:url(commonfilters.xml#large-blur)}
1
2
3
2.12 复合写法
示例代码：
width:467px;
height:700px;
border:1px solid #000;
margin:0px auto;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
img{
width:100%;
height:100%;
}
div:hover{
-webkit-filter:contrast(175%) brightness(70%);
}
h3{
margin:0;
text-align:center;
font-size:20px;
}
你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
实现效果：
解释说明：
你可以组合任意数量的函数来控制渲染。
例如同时去增强图像的对比度和亮度等等。
3. Filter () 函数
以下部分内容出自W3Plus。
很多时候，只是希望元素的背景做效果调整，又不希望他会影响其他元素。
而且又没有backdrop-filter属性的情形之下，filter()就显得格外的重要。
在继续往下阅读之前，你要注意一点，filter()并不等于以前介绍过的filter属性。
简单的理解，一个是函数，一个是属性。那么我们今天要说的是filter()函数。
为了能更好的与filter属性区分，filter()函数接受两个参数：
filter(, )
1
其中是指一个图像，是一个过滤器。
这两者结合在一起将会返回一个处理过的新图像。
例如：
.element {
background:filter(url(path/to/img.jpg), blur(5px));
}
1
2
3
因此，你可以给图片使用过滤效果，然后填充到元素中，比如background-filter、background-opacity、background-blur等等。
注意：
规范中定义的过滤函数
和background-size属性一起使用会有Bug
支持动画
需要添加前缀：-webkit-filter()
值得一提的是，backdrop-filter和filter()可以使用CSS3 transition和animation实现一些圆滑的过度效果或动画，甚至还可以使用JavaScript。
如果觉得《html 页面模糊效果 前端 - 页面滤镜成效及高斯模糊效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
