opacity的一个坑

结论：父元素设置opacity后，子元素将跟随父元素的opacity值；如果想要改变子元素的透明度，可以使用rgba设置父元素的透明度。 废话不多说，直接上代码：

<!--css-->
.box{
  border: 1px solid #000;
  margin-top: 100px;
  width: 140px;
  height: 140px;
}
.father{
  background-color: red;
  opacity: 0;
  width: 100px;
  height: 100px;
  position: relative;
}
.son{
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 40px;
  top: 40px;
}
.father2{
  background: rgba(255, 0, 0, 0);
  width: 100px;
  height: 100px;
  position: relative;
}
.son2{
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 40px;
  top: 40px;
}

<!--html-->
<div class="box">
  <div class="father">
    <div class="son">
    </div>
  </div>
</div>
<div class="box">
  <div class="father2">
    <div class="son2">
    </div>
  </div>
</div>

最终结果如下：第一个box父元素和子元素都是透明的；第二个box父元素透明，子元素不透明。