网站变灰是如何实现的

在全国性的悼念活动,比如清明节、汶川地震周年悼念等,一些网站整体变灰如何实现的呢?话不多说,直接上代码:

html {

       filter: grayscale(100%);

}

下面,详细介绍下该 css 样式。

filter,滤镜属性,是CSS3增加的新属性,用来更改元素的模糊和饱和度。该属性包含多种预设的滤镜函数,其中 grayscale(amount) 函数是用来将图像转换为灰度图像,amount 用来值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

网站变灰是如何实现的

该属性浏览器兼容性:

网站变灰是如何实现的

参考地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter