网站首页
博客人生
碎言碎语
网站模板
前端技术

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

2024-01-20 20:45 597 浏览

当需要将网站变灰色来表达平台的哀悼时,如今主流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方法
下一篇给网站文章标题链接添加“加载中”提示的办法
相关内容
相关推荐
网站统计