前言

近期看到一众网站全部失色，忍不住就在浏览器里按下F12，赶紧看看这种效果是如何做到的。 发现大伙都是使用了CSS中的filter（滤镜）属性，为此我也去看了看这个属性的介绍和用法。

介绍

这里引用MDN的介绍：

将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

语法格式

 filter: <filter-function> [<filter-function>]* | none

属性（函数）

1. blur()

   高斯模糊，值越大越模糊，单位为px,默认为0。

2. brightness()

   亮度，值越大图像越亮，单位是百分比，默认为1（100%）。

3. contrast()

   对比度，值越小图像越黑，单位是百分比，为0%则图像全黑；默认为1（100%），值不可以超过100%。

4. grayscale()

   灰度，值为 100%则完全转为灰度图像，值为 0% 图像无变化。默认是0。

   网页中变灰的效果，一般是将这个属性设置在95%。

5. hue-rotate()

   色相旋转，设定图像会被调整的色环角度值，单位是deg。默认是0deg,超过360deg，相当于又绕了一圈。

6. invert()

   反转输入，值为100%则图像完全反转。值为 0%则图像无变化。默认是0.

7. opacity()

   透明度，这个大家就比较熟悉了，单位也是百分比，0%是完全透明，100%图像无变化，默认为1（100%）。

8. saturate()

   饱和度，值为 0%则是完全不饱和，值为 100%则图像无变化。默认是1.

9. sepia()

   深褐色，将图像转换为深褐色。

   值为 100%则完全是深褐色的，值为0%图像无变化。默认是0.

10. drop-shadow()

    阴影，对输入图像引用印象效果，阴影可以设置模糊度。

    和box-shadow属性很像，不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

    他有4个参数

    参数	介绍
    offset-x	（必须），阴影水平距离，负值在图像左边
    offset-y	（必须），阴影垂直距离，负值在图像上边
    blur-radius	（可选），模糊度，值越大，阴影越模糊
    color	（可选），阴影颜色

小案例

点击对应的按钮，再拖拽滑动块，显示对应的效果。