让网站变灰的CSS代码（支持IE、Firefox和Chrome）

橙子2024-01-20 20:45　526 浏览

打赏收藏

当需要将网站变灰色来表达平台的哀悼时，如今主流CSS代码为

主流方法！网站变灰色的CSS代码

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

‌以上代码除了IE都支持，也是现在国内主流网站常用的方法，都对被嫌弃的IE没做特别处理了

因为今年微软已经停止对IE支持更新，力推Edge浏览器，Win平台下的浏览器至此也与Chrome一致了。上方代码轻便易用，放在需要灰掉的页面即可。建议放在<head>里。

如果确定要兼容IE9及以上，可以使用下方代码，效果如QQ腾讯网这样，可以用一个灰色层模拟一下

<div style="position:fixed;
z-index:999;
width:100vw;
height:100vh;
left:-100vw;
outline: 101vw solid rgba(100,100,100,.7);">
</div>

‌效果如下图：

让网站变灰

版权声明 1、文章标题：让网站变灰的CSS代码（支持IE、Firefox和Chrome）
2、本文网址：https://www.ther.cn/Web/23.html
3、本站部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长邮箱：906080088@qq.com进行处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

网站生成静态后，浏览器打开域名让它不自动添加显示index.html方法

给网站文章标题链接添加“加载中”提示的办法