关于这个问题,其实是不熟悉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>
效果是这样的:
具体使用哪种都需要按照