手机扫一扫访问本页内容

微信扫描点右上角"···"分享到好友或朋友圈

关闭
微信扫一扫可打开小程序

微信长按图片或搜“分享录”可打开小程序

关闭
前端,技巧 ,

如何让整个网站变黑白(灰色)?

前天,为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院发布公告决定2020年4月4日举行全国性哀悼活动。

很多网站和平台都关停了服务器:

没停的也做了黑白显示:

当然我的网站也不例外:

但细心或者使用IE、360或者苹果浏览器的小伙伴会发现一些大厂的网站竟然还是彩色的:

那到底都搞了些什么动作才能让整个网站黑白显示呢?网上也有不少资料,基本都是通过在头部加css样式:

方法一:这种方法会影响页面其他样式,而且在IE、360都不行

<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}
</style>

方法二:在IE、360都不行

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

方法三:这种只有在IE不行

<style type="text/css">
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>

方法四:使用这个插件http://james.padolsey.com/demos/grayscale/grayscale.js

<script src="https://j11y.io/demos/grayscale/grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
grayscale(document.body);
}
</script>

还有其他诸如:但以下两种都不行!

只支持IE方法一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>

只支持IE方法二:

body {filter:gray}

我用上面第三种,简单兼容性又好,当然如果你有更好的办法连同IE都支持的欢迎给我留言,等这次疫情彻底结束,全球做哀悼还可以用上呢!


展开阅读全文


上一篇:

下一篇:

您还可以访问本站的小程序、公众号等所有端,或者下载APP, 在小程序、APP上可以评论文章以及保存图片还有在线客服哦,如您有任何疑问或建议可向作者提出意见反馈
关注我的公众号每天为您分享各类有用信息
扫码打开小程序可评论文章保存图片,在“我的”有实时在线客服哦,看效果?
分享录多端跨平台系统
分享录交流群