前端页面置灰实现方法，整个页面置灰效果css，页面灰色样式

前端攻城狮路飞

已于 2022-12-01 13:58:29 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 前端 html

于 2022-12-01 09:32:25 首次发布

本文链接：https://blog.csdn.net/m0_46156566/article/details/128126423

CSS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使网页呈现为灰度样式的CSS解决方案。通过使用filter属性及其多种浏览器前缀变体，可以在大多数现代浏览器中实现页面元素的整体灰度效果。需要注意的是IE10及以下版本不支持此功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面变成灰色样式，那么具体我们项目中怎么实现呢？看看下面的代码，应该大部分是可以实现的，至少我所负责的项目，移动端和pc端是实现了相应的效果，pc端对于ie10及以下的版本，是无法兼容的，如果有哪位大佬可以兼容ie10，可以吧代码分享在评论区，一起帮助大家解决问题

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