rgba 与 opacity 透明度对比

rgba() 和 opacity 设置透明度的区别及使用场景

问题

rgba() 和 opacity 都能实现透明效果，它们有什么不同？

解答

opacity

opacity 作用于整个元素，包括所有子元素，且子元素无法覆盖。

<div class="parent">
  <div class="child">子元素文字也会变透明</div>
</div>

<style>
.parent {
  opacity: 0.5;
  background-color: blue;
}

.child {
  /* 即使设置 opacity: 1 也无效，仍然是半透明 */
  opacity: 1;
  color: white;
}
</style>

rgba()

rgba() 只影响设置它的那个属性，不会影响子元素。

<div class="parent">
  <div class="child">子元素文字完全不透明</div>
</div>

<style>
.parent {
  /* 只有背景色是半透明的 */
  background-color: rgba(0, 0, 255, 0.5);
}

.child {
  /* 文字颜色不受影响 */
  color: white;
}
</style>

对比示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      margin: 10px;
      color: white;
    }
    
    /* 使用 opacity */
    .opacity-box {
      background-color: blue;
      opacity: 0.5;
    }
    
    /* 使用 rgba */
    .rgba-box {
      background-color: rgba(0, 0, 255, 0.5);
    }
  </style>
</head>
<body>
  <div class="box opacity-box">
    <p>opacity: 文字也变透明了</p>
  </div>
  
  <div class="box rgba-box">
    <p>rgba: 只有背景透明，文字清晰</p>
  </div>
</body>
</html>

常见场景

/* 半透明遮罩层 - 用 rgba，不影响内部弹窗 */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 禁用状态 - 用 opacity，整体变淡 */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 半透明按钮背景 - 用 rgba，文字保持清晰 */
.btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

关键点

opacity 影响整个元素及所有子元素，子元素无法覆盖
rgba() 只影响单个属性，不会继承给子元素
需要半透明背景但文字清晰时，用 rgba()
需要整个元素（含内容）变淡时，用 opacity
opacity 会创建新的层叠上下文