filter

概述

CSS滤镜（filter）属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

使用CSS滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回“none“。除特殊说明外，函数的值如果接受百分比值（如34%），那么该函数也接受小数值（如0.34）。

你可以组合任意数量的函数来控制渲染。

兼容性

函数及应用

原图：

url()

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

blur()

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

filter: blur(5px);

brightness()

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0，图像会全黑。值是1，则图像无变化。其他的值对应线性乘数效果。值超过1也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

filter: brightness(0.5);

contrast()

调整图像的对比度。值是0的话，图像会全黑。值是1，图像不变。值可以超过1，意味着会运用更低的对比。若没有设置值，默认是1。

通俗来说，该滤镜是对图片最亮的地方和最暗的地方进行调整，从而改变图片的均衡感。

filter: contrast(0.5);

drop-shadow()

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受shadow（在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。