fliter

[hexuanzhang]

filter

CSS 滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 CSS 标准里包含了一些已实现预定义效果的函数。也可以参考一个 SVG 滤镜，通过 URL 链接到 SVG 滤镜元素（SVG filter element）。

语法

url()

URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.

filter: url(resources.svg#c1)

blur()

给图像设置高斯模糊。“radius”一设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，值越大越模糊；如果没有设定值，则默认是 0；这个参数可设置 css 长度值，但不接受百分比值。

filter: blur(5px)

brightness()

给图片应用一种线性乘法，使其效果看起来更亮或更暗。0% 变为全黑。100% 图像无变化。其他的值对应线性乘数效果。超过 100% 也可以的，图像会比原来更亮。默认值为 1（100%）。

filter: brightness(0.5)

contrast()

调整图像的对比度。0% 图像变为全黑。100% 图像保持不变。值可以超过100%，图像会产生更明显的对比。默认值为 1（100%）。

filter: contrast(200%)

drop-shadow()

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度。设置属性与 box-shadow 类似。

filter: drop-shadow(16px 16px 10px black)

grayscale()

将图像转换为灰度图像。100% 则图像完全转为灰度图像，0% 图像无变化。默认值为 0，取值范围为 [0, 100%]。

filter: grayscale(100%)

hue-rotate()

旋转图像色相。0deg 则图像无变化；无最大值，但超过 360deg 相当于旋转了一圈。默认值为 0。

filter: hue-rotate(90deg)

invert()

反转图像，效果与相机底片类似。100% 是完全反转，0% 图像无变化。默认值为 0，取值范围为 [0, 100%]。

filter: invert(100%)

opacity()

改变图像的透明度。0% 完全透明，100% 图像无变化。默认值为 1，取值范围为 [0, 100%]。 与 opacity 属性相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。

filter: opacity(50%)

saturate()

改变图像的饱和度。0% 完全不饱和，100% 图像无变化。默认值为 1，取值范围为 [0, +∞)。

filter: saturate(200%)

sepia()

将图像转换为深褐色。100% 完全是深褐色的，0% 图像无变化。默认值为 0，取值范围为 [0, 100%]。

filter: sepia(100%)

扩展

• 允许使用复合函数

filter: contrast(175%)brightness(3%)

• backdrop-filter 属性

将 filter 应用于元素背景（不是 background ）中。目前仅有 Safari 9+ 支持。

.text {
    background: rgba(0,0,0,.6);
    backdrop-filter: grayscale(1) contrast(3) blur(1px);
}

• filter() 函数

将 filter 效果作用于元素的 background 中。该函数包括两个参数，第一个是图片 url，第二个是 filter 效果。 目前也仅有 Safari 9+ 支持。

.element {
    background: filter(url(path/to/img.jpg), blur(5px));
}

参考资料

• fliter
• 非标准的 filter（低版本 IE）
• Advanced CSS filters
• caniuse（Backdrop Filter）
• [caniuse（filter()）](http://caniuse.com/#search=filter())