关于CSS中opacity改变透明度问题

我们如果在写背景样式时直接使用opacity，会造成背景和其文字全部透明，例如如下代码：

.div1 {
    width: 100px;
    height: 60px;
    background-color: #a4f3c0;
    opacity: 0.3;
    font-size: 30px;
}


<div class="div1">
  hello
</div>

效果图如下

可以看出，直接使用opacity会使文字和背景全部改变透明度。

解决方案：背景改变透明度使用rgba(要注意后面的颜色要使用三原色表示了)，这样就不会影响文字了。代码如下:

.div2 {
    width: 100px;
    height: 60px;
    background: rgba(164, 243, 192, 0.3);
    font-size: 30px;
}



<div class="div2">
  hello
</div>

效果图如下