css opacity透明度继承解决方法

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;
        }

二、用透明的图片

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