CSS Transparency với RGBA - Độ trong suốt màu sắc

Giới thiệu

RGBA (Red, Green, Blue, Alpha) cho phép đặt độ trong suốt (opacity) cho màu nền, màu chữ, border, box-shadow... mà không ảnh hưởng đến element con. Khác với opacity làm trong suốt cả element và con cháu.

Ví dụ hoàn chỉnh - So sánh RGBA vs Opacity

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RGBA Transparency</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; padding: 40px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
    .container { max-width: 800px; margin: 0 auto; }
    h1 { text-align: center; color: #fff; margin-bottom: 30px; }
    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
    .card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
    .card h3 { margin: 0 0 16px; font-size: 16px; color: #333; }
    .demo-box {
      width: 100%; height: 120px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 600; color: #fff; font-size: 14px;
    }
    /* RGBA - Chỉ nền trong suốt, chữ vẫn đậm */
    .rgba-box { background: rgba(102, 126, 234, 0.6); }
    /* Opacity - Cả element trong suốt (chữ cũng mờ) */
    .opacity-box { background: #667eea; opacity: 0.6; }
    /* Overlay pattern */
    .overlay-demo { position: relative; height: 150px; border-radius: 12px; overflow: hidden; background: url('https://picsum.photos/seed/overlay/400/200') center/cover; }
    .overlay-demo::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
    .overlay-content { position: relative; z-index: 1; color: #fff; text-align: center; padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>RGBA vs Opacity</h1>
    <div class="card-grid">
      <div class="card">
        <h3>RGBA (0.6) - Chỉ nền mờ</h3>
        <div class="demo-box rgba-box">Văn bản vẫn sắc nét</div>
      </div>
      <div class="card">
        <h3>Opacity (0.6) - Cả element mờ</h3>
        <div class="demo-box opacity-box">Văn bản cũng mờ theo</div>
      </div>
      <div class="card">
        <h3>Overlay với RGBA</h3>
        <div class="overlay-demo">
          <div class="overlay-content">Nội dung trên overlay đen 50%</div>
        </div>
      </div>
      <div class="card">
        <h3>RGBA cho Text & Border</h3>
        <div style="padding:20px; border: 3px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.1); border-radius:12px">
          Border & Text bán trong suốt
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Cú pháp RGBA

rgba(red, green, blue, alpha)
/* red, green, blue: 0-255 hoặc 0%-100% */
/* alpha: 0 (trong suốt hoàn toàn) đến 1 (đặc hoàn toàn) */
background-color: rgba(255, 0, 0, 0.5); /* Đỏ 50% */
color: rgba(0, 0, 0, 0.7);              /* Đen 70% */
border: 2px solid rgba(255,255,255,0.3); /* Viền trắng 30% */
box-shadow: 0 4px 20px rgba(0,0,0,0.15);  /* Bóng đen 15% */

RGBA vs Opacity - Khi nào dùng cái nào?

HSLA - Lựa chọn thay thế

HSLA (Hue, Saturation, Lightness, Alpha) dễ điều chỉnh màu hơn:

hsla(240, 100%, 50%, 0.5) /* Xanh dương 50% */
hsla(0, 100%, 50%, 0.3)   /* Đỏ 30% */

Browser Support

• RGBA: IE9+, tất cả trình duyệt hiện đại.
• HSLA: IE9+, tất cả trình duyệt hiện đại.
• Hex với alpha (8 digits): #RRGGBBAA (VD: #667eea99 = 60% opacity) - Hỗ trợ tốt hiện nay.