CSS3 filter 和 backdrop-filter
# CSS3 filter 和 backdrop-filter
参考：CSS3 Filter详解 (opens new window)
参考：CSS滤镜：backdrop-filter (opens new window)
# filter
CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。它常用于调整图像的渲染、背景或边框显示效果。
filter属性兼容性还是不错的，除了IE。
它有如下属性：
- url() 通过URL链接到SVG滤镜元素
- grayscale 灰度 值为0-1之间的小数
- sepia 褐色 值为0-1之间的小数
- saturate 饱和度 值为num
- hue-rotate 色相旋转 值为angle
- invert 反色 值为0-1之间的小数
- opacity 透明度 值为0-1之间的小数
- brightness 亮度 值为0-1之间的小数
- contrast 对比度 值为num
- blur 模糊 值为length
- drop-shadow 阴影
<offset-x><offset-y>(必须)<blur-radius>(可选)<color>(可选)
# 使用
原图
模糊
.filter-blur{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
filter: blur(2px)
}
1
2
3
4
5
6
7
2
3
4
5
6
7
灰度
.filter-grayscale{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: grayscale(1);
filter: grayscale(1); /*使用背景图片效果更佳*/
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
亮度
.filter-brightness{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: brightness(1);
filter: brightness(1); /*使用背景图片效果更佳*/
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
对比度
.filter-contrast{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: contrast(2.3);
filter: contrast(2.3); /*使用背景图片效果更佳*/
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
饱和度
.filter-saturate{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: saturate(2.3);
filter: saturate(2.3); /*使用背景图片效果更佳*/
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
色相旋转
.filter-rotate{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: hue-rotate(185deg);
filter: hue-rotate(185deg); /*使用背景图片效果更佳*/
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
反色
.filter-invert{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: invert(1);
filter: invert(1);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
阴影
.filter-shadow{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
透明度
.filter-opacity{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: opacity(55%);
filter: opacity(55%);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
褐色
.filter-sepia{
width:300px;
height:180px;
margin:0 auto;
background-color: #FFADD2;
-webkit-filter: sepia(0.77);
filter: sepia(0.77);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# backdrop-filter
backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。
此属性是定义筛选器属性的筛选器效果模块级别1的扩展。它使用与filter属性相同的语法，但效果将应用于元素的背景。这种影响常见于运行ios7及以上版本的设备接口，以及os x yosemite及以上版本的设备接口。如果没有这个特性，这种效果只能通过编辑背景图像本身并应用剪裁和定位技术来实现。
若要使属性具有任何可见效果，需要从嵌套元素或绝对位置沿Z轴将两个元素堆叠在一起。另外，应用背景过滤器的元素的背景必须是半透明的。backdrop filter的工作原理是使浏览器引擎将目标锁定在样式元素后面的内容，而不是元素本身的背景。过滤效果随后应用于该内容，在最终呈现中，背景与页面上的其他元素合成。
对元素应用背景过滤器也会创建新的堆叠上下文，就像应用不透明度时一样。
请注意，使用此属性可能会对性能产生不利影响，特别是当应用于大量元素或页面的大区域时，因此应谨慎使用。
# 语法
backdrop-filter: none | <filter-function-list>
1
<filter-function-list>
一个空间分隔的过滤函数列表，应用于它们被声明的顺序。下面是可用的筛选器函数列表，它们与筛选器属性的筛选器功能相同。
- blur() 模糊图像
- brightness() 让图像更明亮或更暗淡
- contrast() 增加或减少图像的对比度
- drop-shadow() 在图像后方应用投影
- grayscale() 将图像转为灰度图
- hue-rotate() 改变图像的整体色调
- invert() 反转图像颜色
- opacity() 改变图像透明度
- saturate() 超饱和或去饱和输入的图像
- sepia() 将图像转为棕褐色
# 使用
backdrop-filter效果与filter差不多就不展示了。
# 区别
- Filter不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
- backdrop-filter 是使透过该层的底部元素模糊化
- backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
- backdrop-filter目前兼容性不佳（不支持火狐和IE，火狐需要额外配置），尤其是安卓移动端。
在GitHub上编辑 (opens new window)
上次更新: 8/13/2021, 5:40:22 PM