CSS - 设置元素的不透明度

最新推荐文章于 2025-05-16 09:08:25 发布

Heismk

最新推荐文章于 2025-05-16 09:08:25 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_29761395/article/details/121148757

HTML & CSS & JavaScript 专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了 CSS 中的 opacity 属性，解释了如何设置元素的不透明度，并探讨了此属性对元素及其子元素的影响。通过实例展示了不同 opacity 值的效果。

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

示例

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>opacity</title>
        <style type="text/css">
            div {
                border-color: #000000;
                border-width: 1px;
                border-style: solid;
                margin: 5px;
                padding: 5px;
            }
            p {
                background-color: #40e0d0;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div style="opacity: 0.22;">
            <p>
                The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
            </p>
        </div>
        <div style="opacity: 1;">
            <p>
                opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.
            </p>
        </div>
    </body>
</html>