哀悼，网站如何变成灰色，怎么实现？其实很简单，一行css就可以搞定

小咪咪 2024-03-31 14:08 25阅读 0赞

#### 快速跳转 ####

*   *  如何实现

*  大家可以看到最近的网站主页和内容几乎都已经变成了灰色，比如B 站、百度、CSDN 等等。  
    ![bz][]  
    ![bd][]  
    ![csdn][]

### 如何实现 ###

**你们可以打开网页的源代码 会发现都有个`-webkit-filter: grayscale(xx);`的样式代码，将他取消勾选页面颜色就正常了**  
![在这里插入图片描述][d45e7c7720934d5ab966e078fc021279.png]  
**CSDN的也是用的这个样式,内容如下：**

html {
        
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

**关键就是加了个滤镜样式，这个样式名叫做 filter  
官网链接：`https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter`  
还有其他的有趣用法可以去官网看看，例如高斯模糊等…**  
![在这里插入图片描述][29b5b5e435ef4d6882974945e47117a9.png]

[bz]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/58ec05cde7014a6485a20043a5af7967.png
[bd]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/54ec139e12d54018a58f4c55aa578508.png
[csdn]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d60d4c63751944b0ae75074428ce25d6.png
[d45e7c7720934d5ab966e078fc021279.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1347355263d443b68068fac36da4de5c.png
[29b5b5e435ef4d6882974945e47117a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/70df0e6ac60544799d287c31efe1b0e0.png