【CSS】CSS的置灰方法

关注

原创最新推荐文章于 2026-04-20 11:42:52 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

如何实现全网置灰？CSS3来解决小伙伴发现：“怎么某APP是灰的？不会是手机出问题了吗？” 然后再打开其他APP，发现：“都是灰的啊！明白了，看来是有大事发生……赶紧打开新闻看看”。对于前端开发来说，什么效果不是用代码可以实现的呢？下面我们就灰色主题如何设置来研究一番。阅读详情

CSS 置灰方法

css 的代码：

.gray {
           /*grayscale(val):val值越大灰度就越深*/
           -webkit-filter: grayscale(100%);
           -moz-filter: grayscale(100%);
           -o-filter: grayscale(100%);
           filter: grayscale(100%);
           text-align: center;
}

HTML 和 CSS 结合代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gray {
            /*grayscale(val):val值越大灰度就越深*/
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            text-align: center;
        }
        #gray_img {
            width: 405px;
            height: 630px;
        }
    </style>
    <title>Document</title>
</head>
<body>
<div class="gray">
    <h1>
        我是标题
    </h1>
    <div>
        <img src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8c1001e93901213faeed18c350e736d12e2e95d6.jpg" alt="置灰图片" id="gray_img">
    </div>


</div>
</body>
</html>