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

2020-4-21 21:23| 发布者: admin| 查看: 775| 评论: 0

摘要: 当需要将网站变灰色来表达平台的哀悼时，如今主流CSS代码为主流方法！网站变灰色的CSS代码 style html{ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); fi ...

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

当需要将网站变灰色来表达平台的哀悼时，如今主流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及以上

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

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

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

本文于2022年11月30日更新

手机扫一扫，阅读下载更方便˃ʍ˂

1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：在线免费用！这个网站帮你测试响应式网页效果下一篇：这座网页设计博物馆，让我回到拨号才能上网冲浪的千禧年

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

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

支持IE9及以上

最新评论

相关分类

海量资源，一站式满足

木子素材网汇集了各行各业的创意资源

品质保证，专业筛选

素材都是经过精心挑选的精品

会员专享，尊享特权

全国高校创新设计大赛运营单位

灵感碰撞，创意无限

共同碰撞出更多的创意火花

开启百万，创意之旅

素材、图片、软件、课程