css透明度继承

10/4仅供参考

css中opacity透明度的继承问题解决（父元素使用opacity，子元素也变透明）

今天在项目中发现利用opacity改变透明度的话，会有继承问题，子元素也跟着透明了，那我们应该如何去解决这种情况呢？我用了两种方式：

一、父元素不用CSS3来设置透明度，而是设置rgba来设置透明度；

<div class="box"> <div class="box2"> 利用rgba设置透明度，不使用opacity; </div> </div>

.bg{ background:url(7510758314083.jpg);/*此处背景图为了看到透明情况*/ height: 700px; } .box{ background:rgba(255, 0, 0, 0.5); width: 1199px; height: 300px; margin-top: 300px; } .box2{ background: #ff0000; width:500px; height: 300px; }

二、用透明的图片

可以不使用背景颜色设置不透明度，直接使用透明的背景图片。