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