前端实现网页变灰

今天介绍filter属性

filter

grayscale

该属性是一个函数，有个参数。参数的取值是从0到100%。当值为 100% 时，完全转为灰度图像；当值为 0% 时图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。

blur

用于设置元素的模糊效果，函数将高斯模糊应用于输入图像。若没有设置值，默认为 0。该参数可以指定为 CSS 长度，但不接受百分比值。

brightness

用来改变图像的亮度，让其看起来更加暗或者是更加亮。值为 0% 将创建全黑图像。值为 100% 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。

contrast

改变图像的对比度，就是调整图像最暗和最亮部分之间的亮度差异。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。

opacity

改变图像的透明度。值为 0% 则是完全透明，值为 100% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供GPU硬件加速。

sepia

将图像转换成深褐色。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。若未设置值，则默认为 0。

drop-shadow

用于给图像添加阴影，能够让图像看起来更加立体。

saturate

改变元素的颜色饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。

initial

filter 的默认值，会被解析为none

inherit

继承父级计算的filter属性的值

backdrop-filter

作用于元素背后的所有元素