通过CSS filter属性可将网页设为灰色，使用html { -webkit-filter: grayscale(100%); filter: grayscale(100%); }兼容多浏览器，适用于悼念场景，建议独立引入并及时移除。
让整个网页变成灰色，可以通过 CSS 的 filter 属性实现。只需在页面的根元素或 body 上应用 grayscale(100%) 滤镜，即可将整个页面呈现为黑白色调，常用于悼念日等庄重场合。
一行CSS代码
html { filter: grayscale(100%); }
将这行代码加入网站的全局样式表中，即可使整个页面变为灰色。适用于所有现代浏览器，包括 Chrome、Firefox、Edge 和 Safari（部分旧版本 Safari 需要 -webkit- 前缀）。
兼容性增强写法
为了确保更广泛的浏览器支持，可以加上 WebKit 前缀：
html {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
这样能覆盖更多设备，特别是移动端 iOS Safari 等基于 WebKit 的浏览器。
立即学习“前端免费学习笔记（深入）”；
使用建议
建议将该样式放在独立的 CSS 文件或 style 标签中，便于快速启用和移除。避免加在局部元素上，否则可能部分区域未被覆盖。若页面有视频或插件内容，部分外部内容可能无法变灰，需单独处理。
基本上就这些，简单有效，适合临时性全站哀悼场景。用完记得及时撤下。
以上就是如何让整个网页变成灰色？一行CSS代码实现全站悼念模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585252.html
微信扫一扫 
支付宝扫一扫 
