在我们编写网页时会用到设置元素透明效果,但是有时我们设置父元素不透明度时,此父元素的子元素也会产生透明效果,我们该怎么设置子元素不透明呢?
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)
}
浮动的子元素
浮动的子元素
效果图: