css3中RGBA和opacity的区别

Posted 2021-04-09 前端技术博文

RGBA是什么？

RGBA是在RGB 的基础上增加了一个通道Alpha。Alpha参数为透明值，在0~1之间。

RGBA 不仅可以用在 background 属性上，还可以用在 color 和 border 属性中。

RGBA和opacity之间的不同点是前者只应用到指定的元素上，后者会影响指定的元素及其子元素。

下面通过实例演示来说明 。

效果展示：

rgba演示.png

html部分：

<!--HTML部分-->
<div class="demo" id="demo">RGBA测试</div>
<div class="demo" id="demo2">opacity测试</div>

css部分：

/*css部分*/ 
#demo {
  width: 200px;
  height: 100px;
  background: rgba(25, 25, 25, .5);
  margin: 10px;
}
#demo2 {
  width: 200px;
  height: 100px;
  opacity: .5;
  margin: 10px;
}