网站页面变灰色的效果

最新推荐文章于 2022-12-02 12:41:56 发布

janthinasnail

最新推荐文章于 2022-12-02 12:41:56 发布

阅读量396

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/janthinasnail/article/details/105310569

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS代码使不同网站（如CSDN、百度、腾讯、淘宝、京东和网易）的页面呈现为灰度效果。通过应用特定的CSS过滤器属性，可以轻松地将彩色网页转换为黑白风格，适用于纪念日或特殊场合的主题调整。

摘要由CSDN通过智能技术生成

注：以下代码源自原网站css代码

/*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);
}

/*百度logo图片变灰色的效果，代码如下*/
#result_logo.qm-activity {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

/*腾讯网站变灰色效果，放在body中，代码如下，*/
.garyBody {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}

/*淘宝网首页变灰色，代码如下*/
html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

/*京东商城首页变灰色，代码如下*/
html.o2_gray {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

/*网易首页变灰色，代码如下*/
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

参考：https://blog.csdn.net/bigbear00007/article/details/101641038