CSS实现父元素半透明,子元素不透明的问题

最新推荐文章于 2024-06-07 15:25:55 发布

.NET跨平台

最新推荐文章于 2024-06-07 15:25:55 发布

阅读量559

点赞数 1

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.csdn.net/WuLex

版权

HTML5+CSS|CSS3 专栏收录该内容

153 篇文章 10 订阅

订阅专栏

关于这个问题，其实是不熟悉opacity和rgba，下面解释一波~

颜色我们都知道有RGB，在RG个新的值，成B颜色模型增加了一为了RGBA颜色模型。最后一个是alpha通道的值，取值在0.0到1.0之间。

共同点：

两者控制透明度的都是一个小数，从0到1，0.0是完全透明，1是完全不透明。

不同点：

opacity属性的值，可以被其子元素继承！！！

让我看看代码如下：

    <style type="text/css">
        .box{
            width: 300px;
            height: 150px;
            background: #000000;
            opacity: 0.4
        }
        .child{
            width: 100%;
            height: 100px;
            background: green;
            font-size: 16px;
        }
        .box1{
            width: 300px;
            height: 150px;
            background: rgba(0,0,0,0.4)
        }
    </style>
<body>
   <div class="box">
       <p class="child">浮动的子元素</p>
   </div>
    <div class="box1">
       <p class="child">浮动的子元素</p>
   </div>
</body>