CSS opacity设置不透明度

最新推荐文章于 2021-12-17 10:56:14 发布

weixin_34319374

最新推荐文章于 2021-12-17 10:56:14 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whylinux/p/10364232.html

本文深入探讨了CSS中opacity属性和rgba()函数的区别，通过实例展示了如何使用这两种方式来调整元素的透明度。opacity属性能够影响整个元素及其子元素的不透明度，而rgba()仅作用于指定的背景颜色。

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

　　1.opacity设置不透明度

　　　　opacity会将含有这个属性的子类都变成具有opacity属性，可以改变元素、元素内容、字标签的不透明度。而rgba只会改变设置的那个背景颜色的透明度效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03透明度示例</title>

    <style>
        .c1 {
            height: 400px;
            width: 400px;
            background-color: black;
            /*opacity: 0.5;   !* 设置不透明度，可以改变元素内容、子标签的透明度 *!*/
            /*color: red;*/
        }

        .c1 {
            color: red;
           opacity: 0.5;
        }

        .c2 {
            color: red;
            background-color: rgba(0, 0, 0, 0.5);   /* 不会改变元素内容的透明度，只会改变背景的透明度 */
        }

    </style>

</head>
<body>


<div class="c1">设置元素不透明度</div>
<div class="c2">我是c2类的标签</div>

</body>
</html>