原文链接：
https://blog.youkuaiyun.com/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 ：灰度
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
grayscale ：灰度
</h3>
</body>
</html>- 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 ： 褐色
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
sepia ： 褐色
</h3>
</body>
</html>- 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 ：饱和度
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
saturate ：饱和度
</h3>
</body>
</html>- 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 ：色相旋转
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
hue-rotate ：色相旋转
</h3>
</body>
</html>- 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 ：反色
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
invert ：反色
</h3>
</body>
</html>- 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 透明度
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
opacity ：透明度
</h3>
</body>
</html>- 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 亮度
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
brightness ：亮度
</h3>
</body>
</html>- 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 ：对比度
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
contrast ：对比度
</h3>
</body>
</html>- 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 ：模糊
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
blur ：模糊
</h3>
</body>
</html>- 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 ：阴影
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
drop-shadow ：阴影
</h3>
</body>
</html>- 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, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
- 这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
- (可选)
- 查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在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 复合写法
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div>
<img src="IMG_3479.JPG">
</div>
<h3>
你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
</h3>
</body>
</html>- 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(<url>, <filter-function-list>)- 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。
扫一扫
1833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
