必备技能11：网页一键变灰

目录

1 缘起

2 演示

3 原理解析

4 拓展

---

1 缘起

为了悼念新型冠状病毒疫情罹难的同胞，清明节举行了全国哀悼活动，当你浏览各大网页的时候，会发现该他们的网页界面都清一色的变成了灰色，这是怎么实现的呢？

其实很简单，稍微琢磨以下，就一行代码即可满足的你的好奇心，并为您答疑解惑，不说废话先摆上这个行神奇的代码：

-webkit-filter: grayscale(100%);

2 演示

那么如何实现呢？现在就给大家演示一下：

我们以CSDN为例，效果是这样：

再看一个示例：

 

3 原理解析

CSS3 filter(滤镜)grayscale(%)：

属性将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

因此：修改所有图片的颜色为黑白 (100% 灰度): -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); 

4 拓展

为了兼容不同浏览器，你还可多写几行代码：

html {
-webkit-filter: grayscale(100%);
/* webkit */
-moz-filter: grayscale(100%);
/*firefox*/
-ms-filter: grayscale(100%);
/*ie9*/
-o-filter: grayscale(100%);
/*opera*/
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
/*ie9- */
}

喜欢我们的分享，敬请关于我们，