CSS —— rgba与opacity的区别

rgba和opacity都可以设置元素的透明度。

两者的区别在于opacity会继承父元素的opacity属性，而rgba设置的元素，其后代元素不会继承父元素的不透明属性。

opacity

语法：opacity: value | inherit

value取值为0~1,0为完全透明，1为完全不透明；inherit表示此属性默认为可继承属性，所以子元素会继承父元素的opacity属性值，从而子元素和父元素达到相同的效果。

但是如果单独设置子元素的opacity的值会产生单独的效果，不过前提是属性值小于或者等于父元素的属性值，否则设置无效，而继承保持父元素属性值。

rgba

语法：rgba(r,g,b,a)

rgba函数在rgb颜色模式基础上增加了alpha通道，alpha通道是不透明度，这样可以在设置颜色的同时去设置透明度。alpha取值在0~1之间。

rgba只会对元素本身产生影响，因为无法继承，所以不会对子元素产生影响。

示例一：

<div class="case">
  <p>Opacity</p>
</div>

.case{
  background-color: gray;
  opacity: 0.5
}
.case p{
  opacity: 0.9
}

上例中使用opacity属性为父元素div设置透明度为0.5，因为opacity是继承属性，并且子元素p标签设置0.9透明度大于父元素透明度，因此子元素透明度不会生效，而是继承父元素透明度。

示例二：

.case{
  background-color: gray;
  opacity: 0.5
}
.case p{
  opacity: 0.2
}

上例中，给子元素设置的透明度0.2小于父元素透明度0.5，因此子元素透明度生效。

示例三：

.case{
  /*background-color: gray;
  opacity: 0.5*/
  background-color: rgba(151, 145, 145, 0.01)
}

上例中，使用了非继承性属性rgba设置父元素透明度，因此此元素不会受父元素透明度的影响。