RGBA 与 Opacity 透明度对比

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

问题

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

解答

opacity

opacity 作用于整个元素，包括所有子元素和内容。

.box {
  opacity: 0.5; /* 整个元素及子元素都变半透明 */
}

rgba()

rgba() 只作用于设置的那个颜色属性，不影响子元素。

.box {
  background-color: rgba(0, 0, 0, 0.5); /* 只有背景半透明 */
}

对比示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      gap: 40px;
      padding: 20px;
    }
    
    /* 使用 opacity */
    .opacity-box {
      width: 200px;
      height: 150px;
      background-color: blue;
      opacity: 0.5; /* 整个元素变透明，包括文字 */
    }
    
    /* 使用 rgba */
    .rgba-box {
      width: 200px;
      height: 150px;
      background-color: rgba(0, 0, 255, 0.5); /* 只有背景透明 */
    }
    
    .text {
      color: white;
      font-size: 18px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="opacity-box">
      <p class="text">opacity: 文字也变透明了</p>
    </div>
    
    <div class="rgba-box">
      <p class="text">rgba: 文字保持不透明</p>
    </div>
  </div>
</body>
</html>

子元素无法覆盖 opacity

.parent {
  opacity: 0.5;
}

.child {
  opacity: 1; /* 无效，子元素最终透明度 = 0.5 * 1 = 0.5 */
}

常见使用场景

/* 场景1：半透明遮罩层，文字清晰 */
.overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* 场景2：hover 时整体变淡 */
.card:hover {
  opacity: 0.8;
}

/* 场景3：半透明边框 */
.box {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

关键点

  • opacity 影响整个元素及所有子元素，子元素无法单独恢复不透明
  • rgba() 只影响设置的颜色属性，不影响子元素
  • 需要半透明背景但内容清晰时，用 rgba()
  • 需要整体淡入淡出效果时，用 opacity
  • opacity 可配合 transition 做动画，rgba() 需要用 background-color 过渡
小于 12px 字体实现 rgba 与 opacity 透明度对比

目录