【CSS属性】滤镜

在 CSS 中，滤镜的使用方式主要分为 3 种：

1. 通过 CSS 的 filter 属性，使用滤镜；
2. 通过 CSS 的 backdrop-filter 属性，使用滤镜；
3. 通过 CSS filter 属性中的 url() 值，引入由 SVG 实现的特殊滤镜效果。

filter 语法及效果

filter 与 backdrop-filter 支持的滤镜语法是相同的，他们的区别在于：

• filter：模糊滤镜的作用是将模糊或颜色偏移等图形效果作用于元素之上。
• backdrop-filter：该属性可以在元素后方区域，添加上模糊或颜色偏移等图形效果。backdrop-filter 的生效范围是元素背后的所有内容，因此，为了能够看到效果，元素或其背景至少要保持部分透明。

综上，不难得出两者之间的差异：filter 滤镜作用于元素本身，而 backdrop-filter 滤镜作用于元素背后区域所覆盖的所有元素。

下面的示例中，filter 属性作用在 img 元素上，backdrop-filter 属性作用在图片之上的 div 元素上，hover 元素时可以看到不施加滤镜的效果。

blur(px) 高斯模糊

设定屏幕上多少个像素融在一起，值越大越模糊，默认为 0，负值无效。

filter: blur(5px)

backdrop-filter: blur(5px)

drag me

brightness(%) 亮度

默认为 100%，值为 0 时图像全黑，可以超过 100%，会比原来更亮。

filter: brightness(40%)

backdrop-filter: brightness(40%)

drag me

contrast(%) 对比度

默认为 100%，值为 0 时图像全灰，可以超过 100%，会比原来更鲜艳。

filter: contrast(200%)

backdrop-filter: contrast(200%)

drag me

drop-shadow(h-shadow v-shadow blur spread color) 阴影

与 box-shadow 属性相似，与 box-shadow 的区别在于：

• drop-shadow 创建一个符合元素（图像）本身形状（alpha 通道）的阴影，box-shadow 属性在元素的整个框后面创建一个矩形阴影。
• drop-shadow 没有内阴影。

filter: drop-shadow(1px 1px 2px #333)

backdrop-filter: drop-shadow(1px 1px 2px #333)

drag me

grayscale(%) 灰度

默认为 0，值为 100%时完全转为灰度图像，有效取值为 0%-100%。

filter: grayscale(100%)

backdrop-filter: grayscale(100%)

drag me

hue-rotate(deg) 色相旋转

有效取值为 0-360deg。

filter: hue-rotate(90deg)

backdrop-filter: hue-rotate(90deg)

drag me

invert(%) 反转图像

有效取值为 0%-100% ，设置为 50% 时效果与 contrast(50%) 相同。

filter: invert(75%)

backdrop-filter: invert(75%)

drag me

opacity(%) 透明度

有效取值为 0%-100%，与 opacity 属性的不同在于一些浏览器会开启硬件加速。

filter: opacity(50%)

backdrop-filter: opacity(50%)

drag me

saturate(%) 饱和度

默认为 100%，值为 0 时完全不饱和，与 grayscale(100%) 效果相同，有效取值为 0%-100%。

filter: saturate(30%)

backdrop-filter: saturate(30%)

drag me

sepia(%) 转为深褐色

有效取值为 0%-100%，将图像转为深褐色。

filter: sepia(60%)

backdrop-filter: sepia(60%)

drag me

blur 叠加 contrast 实现融合效果

在多个图形的边与边接触的时候，会产生一种边界融合的 drop-filter 效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

【filter-fusion】使用滤镜实现融合效果

参考

掘金小册-CSS 技术揭秘与实战通关-filter：CSS 中的三种滤镜模式及其特殊性介绍