75142913在线留言
各大门户网站网页变灰的代码_网站运营_网络人
  2. 首页
  3. 网站运营
  4. 各大门户网站网页变灰的代码

各大门户网站网页变灰的代码

Kwok 发表于：2022-12-02 10:02:27 点击：449 评论： 0

在重大事件期间，各大门户网站都会使其内容变成“黑白”显示，这也是借鉴、学习的前端技巧，通常情况下都是使用CSS代码来实现的。这样我截取部分门户的代码。

1、百度

百度的Logo 使用的一个灰色图片（logo/pc/index_gray.png），所以，百度只是在body标签上加载了一个“.big-event-gray”类实现：

body.big-event-gray{
        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
    }

2、网易

直接修改了HTML标签：

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;
    }

3、新浪

修改了 body 下的所有元素：

body * {
        -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: gray;
    }

4、bilibili

因为存在视频和媒体，所以B站的代码和其它门户稍有不同：

html.gray {
    filter: grayscale(85%) saturate(80%);
    -webkit-filter: grayscale(85%) saturate(80%);
    -moz-filter: grayscale(85%) saturate(80%);
    -ms-filter: grayscale(85%) saturate(80%);
    -o-filter: grayscale(85%) saturate(80%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=.85);
    -webkit-filter:grayscale(.85) saturate(.8)
}

5、爱奇艺

使用了.gray 类：

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

6、优酷

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

    body {
        filter: gray;
    }

7、京东

html.o2_gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid: dximagetransform.microsoft.basicimage(grayscale=1);
    filter:progid:dximagetransform.microsoft.basicimage(grayscale=1)
}

8、淘宝和天猫

淘宝在CSS里处理和其它站一样。但天猫就比如直接一些，下面是淘宝的代码：

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

天猫直接在html配置上应用了style：

<html style="filter: grayscale(100%);">
除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/238
标签：黑白Kwok最后编辑于：2022-12-02 11:02:29
赞 0赏
感谢打赏！

上一篇：利用程序计算小学3年级的奥数题 2,4,5,7,11,13,23,25,( ),( )

下一篇：在城市体面的“流浪”指北

相关文章

《各大门户网站网页变灰的代码》的网友评论(0)

最新文章

本站推荐阅读

热门点击文章