【CSS】CSS的置灰方法

最新推荐文章于 2025-05-19 09:53:14 发布

原创最新推荐文章于 2025-05-19 09:53:14 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

HTML+CSS基础知识专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用CSS将元素置灰的方法，通过结合`filter`属性的`grayscale()`函数和`opacity`属性来实现。提供了相关代码示例并展示了实际效果。

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

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>