如何实现全站网页置灰——filter属性的妙用

Posted 2020-11-27 xiaqin

2020.04.04国家把这天定为全国哀悼日后，你会发现好多网站的网页变灰了！！！

那么具体是怎么实现的呢？

其实只要全局给html 或者body添加个样式就可以啦

一、类名添加法，代码如下

.grayColor{
　　
   -webkit-filter: grayscale(100%);
　　-moz-filter:grayscale(100%);
　　-ms-filter:grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

把类名添加到html或body上就可以啦

二、行内样式法

网易云音乐采用的是这种方式，下面是他们的代码

<style>
 html {
 /*兼容FF*/
  filter: url("data:image/svg+xml;utf8,<svg xmlns=‘http://www.w3.org/2000/svg‘>

  <filter id=‘grayscale‘><feColorMatrix type=‘matrix‘ values=‘0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.333 3 0 0 0 0 0 1 0‘/></filter></svg>#grayscale");
 /*兼容IE内核*/
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 /*兼容其它，谷歌之类的*/
 -webkit-filter: grayscale(1);
}

</style>