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設置父元素透明度，因此此元素不會受父元素透明度的影響。