参考链接

CSS透明度之rgba和opacity的区别（实例解析）

rgba与opacity的区别

css父元素透明度（opacity）对子元素的影响

MDN：opacity

opacity 和 rgba 区别

两者的后代元素都不会继承对应的属性值

但 opacity 会影响其子元素的透明度，

而 rgba 不会影响其子元素的透明度。

补充

首先子元素会受到父元素的 opacity 属性的影响：

  • 设置父元素 opacity: 0.5，子元素不设置 opacity，子元素会受到父元素 opacity 的影响，也会有 0.5 的透明度。

其次子元素的透明度是基于父元素的透明度计算的：

  • 设置父元素 opacity: 0.5，即使设置子元素 opacity: 1，子元素的 opacity: 1 也是在父元素的 opacity: 0.5 的基础上设置的，因此子元素的 opacity 还是 0.5。

其他测试：

HTML

  1. <div class='box opacity'>
  2.     opacity
  3.     <div class='a1'>opacity
  4.         <div class='b1'>opacity</div>
  5.     </div>
  6. </div>
  7. <div class='box opacity'>
  8.     opacity
  9.     <div class='a2'>opacity
  10.         <div class='b2'>opacity</div>
  11.     </div>
  12. </div>

CSS

  1. .box { display: inline-block; }
  2. .opacity { opacity:1; }
  3. .a1 { opacity: 1; }
  4. .b1 { opacity: .25; }
  5. .a2 { opacity: .5; }
  6. .b2 { opacity: .5; }

直接设置 0.25 和 0.5 * 0.5 叠加，最后一行的字母透明度看起来是相同的。

（肉眼看可能还是没那么有说服力，故只当作简单的测试验证）

CSS opacity和rgba区别 - 图1