html 子标签不透明,css子元素不透明怎么做？

在我们编写网页时会用到设置元素透明效果，但是有时我们设置父元素不透明度时，此父元素的子元素也会产生透明效果，我们该怎么设置子元素不透明呢？

css中常用设置不透明度的方法有opacity与rgba两种，这两个属性都可以设置元素透明度，但是有opacity属性的所有后代元素都会继承 opacity属性，而RGBA后代元素不会继承不透明属性。

所以css可以通过rgba方法设置父元素透明度，不对子元素进行透明度设置即可使子元素不透明。

示例：

.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)

}

浮动的子元素

浮动的子元素

效果图：