|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > 如何快速将网页样式改为灰白样式?使用CSS滤镜去除页面所有色彩
如何快速将网页样式改为灰白样式?使用CSS滤镜去除页面所有色彩

如何快速将网页样式改为灰白样式?使用CSS滤镜去除页面所有色彩

日期:2020-05-16 浏览量:1505 原创作者:湖八爷
今天在刷头条的时候看到新闻说霍金去世了,我以为看到的是假新闻,就随手百度了一下。

然后发现百度百科霍金页面整个都变成灰白样式了,这才相信霍金老师真的离开了。缅怀霍老师之后,感叹百度这个小举动真的还挺到位的。就想着百度是怎么实现的,以后遇到重大灾难,重要纪念日等,我们也可以把自己的网站相关页面改成灰白页面表示敬重。废话不多说,直接上代码:


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


只需要将以上代码拷贝到页面的CSS文件中或者拷贝到页面head标签中的style标签中。

代码的原理就是使用CSS滤镜将页面中所有的彩色去掉。


使用CSS滤镜将页面中所有的彩色去掉