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

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

相关文章:

  • 2022-01-15
  • 2022-12-23
  • 2021-09-20
  • 2021-07-18
  • 2021-06-18
  • 2022-01-09
  • 2020-04-07
  • 2021-12-18
猜你喜欢
  • 2022-12-23
  • 2022-01-02
  • 2020-04-06
  • 2022-12-23
  • 2021-10-22
  • 2022-01-09
相关资源
相似解决方案