4月4日网站变灰记录

基本都是通过 grayscale 来实现的
都不支持 IE 11
但在 IE 11 的情况下表现却各不相同
B站、A站、淘宝、京东、百度、虎扑、开源中国

B 站

html.gray{-webkit-filter:grayscale(.95)}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFlb7OzI-1586078009132)(https://i.loli.net/2020/04/04/NM8mHGFajogk7Jp.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G2cEbQAu-1586078009141)(https://i.loli.net/2020/04/04/7NUOalkJzxqrSw3.png)]

A站

html .gray {-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);-webkit-filter: grey;filter: gray;
}

有多浏览器前缀考虑
实际上无法用 ie11 打开网站
不过和 B 站一样，去除无关内容，值得称赞

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BtQaFwS-1586078009143)(C:\Users\李燕no\Pictures\NzxrnwZHhoc85Ps.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Pew7vM0-1586078009144)(C:\Users\李燕no\Pictures\jQCL4T7OJiMGED9.png)]

淘宝

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FruYv6Mw-1586078009145)(https://i.loli.net/2020/04/04/xUonqWCDaKfuVw9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K9g5jnq2-1586078009146)(https://i.loli.net/2020/04/04/td9mWU7wkKLQueY.png)]

京东

/* 一段控制灰色失效的 JS 代码 */
$html.toggleClass('o2_gray', isDuringDate('2020/04/04 00:00:00', '2020/04/04 23:59:59'))html.o2_gray {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

可部分加载分类条目
但内容无法加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8xEiRTQ-1586078009147)(https://i.loli.net/2020/04/04/h9tx6CEjLKRIbuq.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WO4xkOYE-1586078009148)(https://i.loli.net/2020/04/04/VCPOYRK3zaMghdI.png)]

百度

@font-face{font-family:cIconfont;src:url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-a37745d6f3.eot);src:url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-a37745d6f3.eot?#iefix) format('embedded-opentype'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-b021b3a4c4.woff2) format('woff2'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-2a209a281f.woff) format('woff'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-37639e7474.ttf) format('truetype'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-475b0dc226.svg#iconfont) format('svg')}
body.qm-activity #head_wrapper,body.qm-activity #s_menu_gurd,body.qm-activity #u1,body.qm-activity #u_sp,body.qm-activity .s-ctner-menus .s-menu-item-underline,body.qm-activity .s-news-rank-content,body.qm-activity .s-news-wrapper .s-news-list-wrapper .hot-point,body.qm-activity .s-news-wrapper .s-news-list-wrapper:nth-child(-n+3) img.s-news-img,body.qm-activity .s-top-left.s-isindex-wrap{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}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TBmP8utM-1586078009149)(https://i.loli.net/2020/04/04/hXR1k8l2CysBExo.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vEisSJS-1586078009149)(https://i.loli.net/2020/04/04/kEcwlCZNa9iAHVX.png)]

虎扑

<html style="filter: grayscale(100%);>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFaX62Za-1586078009150)(https://i.loli.net/2020/04/04/MlrJaYhTjAEFXZ2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2A63s7gY-1586078009152)(https://i.loli.net/2020/04/04/qdfXvuVaToQ7sKy.png)]

开源中国

body {filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ljV1dra0-1586078009153)(https://i.loli.net/2020/04/04/f76b8CxyS9nHldY.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OPNVAeD-1586078009154)(https://i.loli.net/2020/04/04/ztYU1orXiOV4hkE.png)]

总结

百度和淘宝两个老牌互联网公司对兼容的重视可见一斑
B站和A站等二次元视频网站也都删除了其他无关内容
1. 老牌视频网站腾讯、爱奇艺表现良好
2. 但优酷在 IE 11 的情况会加载其他内容
京东在 IE 11 的表现让人非常失望
至于 A 站在 IE 11 无任何反应的情况，希望相关技术人员能重视一下吧

效率和兼容可能会有很大程度上的冲突，但出发点都是对抗击新冠肺炎疫情斗争而牺牲的烈士和逝世同胞寄托哀思。

4月4日网站变灰实录相关推荐

4月4日网站变灰色的效果是怎么实现的？
4月4日时,很多网站包括主页和内容(包括图片.按钮等)也都已经变成了灰色.当天我打开的csdn.人人视频都全部变为了灰色. 我当时第一想法是难道把这些图片都换了一遍吗???但是成本未免太高,且可能会有 ...
国家公祭日网站变灰(原创)
国家公祭日网站变灰(原创) 因为身在高校就读负责维护学院网站,为响应国家公祭日(2020-12-13)缅怀先烈.铭记历史,一整天需要网站变成全灰色,但如果直接当天改代码很麻烦,于是自己就写了一个js脚 ...
html页面整体变灰,CSS + JS 网站变灰（变黑白），兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
网站变灰，寄托哀思，让我们共同行动!( 图片、文字、Flash变灰)
网站变灰,寄托哀思,让我们共同行动! 在全局CSS定义中加入以下代码,可使除FLASH外的元素变灰 body { filter:progid:DXImageTransform.Microsoft.Ba ...
网站变灰CSS，多浏览器兼容版本
网站变灰CSS,多浏览器兼容版本: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: g ...
一行css代码让整个网站变灰, 通过js控制定点触发和关闭
今天是5.12是个特殊的日子,有的时候吧会把整个网站变灰的需求这个我们用css过滤器一行代码就能实现了 filter: grayscale(100%); 问题是出在定点触发这块,我们可以通过 ...
“网站变灰”的代码实现
网站变灰为了表示哀悼,当天很多网站把主页和内容都变成了灰色,比如百度.B 站.爱奇艺.CSDN 等等. CSDN&&爱奇艺&&百度等实现: html.gray {- ...
网站变灰小妙招-几行代码搞定
网站变灰不需要重写样式,几行代码搞定: html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grays ...
【2020.04.04缅怀英烈，哀悼英雄】哀悼日网站变灰代码
哀悼日网站变灰代码.昨晚加班把公司的多有网站全变设置完成,缅怀英烈,哀悼英雄.记住你们,因为你们我们变得安全,谢谢你们. 在全站的CSS中写入以下代码: html { filter:progid:DX ...

4月4日网站变灰实录

4月4日网站变灰记录

B 站

A站

淘宝

京东

百度

虎扑

开源中国

总结

4月4日网站变灰实录相关推荐

最新文章

热门文章