用一行代码实现网页变灰效果

最新推荐文章于 2024-10-24 10:10:03 发布

那一日面朝大海

最新推荐文章于 2024-10-24 10:10:03 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/AN0692/article/details/105482994

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种通过CSS实现网页整体或部分元素灰度显示的方法，适用于网站维护或纪念活动时使用，只需为HTML节点添加特定class即可实现效果。

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

<meta http-equiv="X-UA-Compatible" content="IE=9">
    <style>
        html{
        filter: gray; /* IE6-9 */
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        
        }
        body{filter:Gray;}
        img{filter:Gray;}
    </style>

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

想要变灰的节点只需要加上 gray 这个 class 就好了，比如加到 html 节点上就可以全站变灰了。