Giới thiệu
RGBA = Red + Green + Blue + Alpha. Mở rộng từ RGB (CSS2) bằng thêm kênh Alpha kiểm soát độ trong suốt. Giá trị R,G,B: 0-255 (hoặc 0-100%). Alpha: 0-1 (hoặc 0%-100%).
Cú pháp
rgba(<red>, <green>, <blue>, <alpha>) /* Hoặc % */ rgba(<red>%, <green>%, <blue>%, <alpha>) /* CSS Color Level 4: space-separated */ rgba(255 0 0 / 0.5) rgba(100% 0% 0% / 50%)
Ví dụ: 3 màu gốc với opacity 0.3
<!DOCTYPE html>
<html>
<head>
<style>
.rgba-box {
width: 150px; height: 150px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 20px;
font-family: system-ui, sans-serif;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
#p1 { background-color: rgba(255, 0, 0, 0.3); } /* Red 30% opacity */
#p2 { background-color: rgba(0, 255, 0, 0.3); } /* Green 30% opacity */
#p3 { background-color: rgba(0, 0, 255, 0.3); } /* Blue 30% opacity */
</style>
</head>
<body>
<p>RGBA colors (Alpha = 0.3):</p>
<div id="p1" class="rgba-box">Red</div>
<div id="p2" class="rgba-box">Green</div>
<div id="p3" class="rgba-box">Blue</div>
</body>
</html>
RGBA vs HSLA vs Opacity
| Đặc điểm | RGBA | HSLA | opacity |
|---|---|---|---|
| Phạm vi | Chỉ thuộc tính màu (bg, border, color) | Chỉ thuộc tính màu | Toàn bộ element + con |
| Điều chỉnh sáng | Khó (đổi 3 kênh) | Dễ (đổi L%) | Không áp dụng |
| Tạo palette | Khó | Dễ (fix H, biến S/L) | Không |
| Hiệu năng | Tốt | Tốt | Tốt (GPU) |
Ứng dụng phổ biến
- Overlay/Modal backdrop:
rgba(0,0,0,0.5) - Glassmorphism:
rgba(255,255,255,0.1)+backdrop-filter: blur() - Border trong suốt:
border: 1px solid rgba(255,255,255,0.2) - Text mờ:
color: rgba(0,0,0,0.6) - Box-shadow mờ:
box-shadow: 0 4px 20px rgba(0,0,0,0.15) - Gradient với transparency:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0))
CSS Color Level 4: Cú pháp mới (Space-separated)
/* Cũ: comma-separated */ rgba(255, 0, 0, 0.5) hsla(120, 100%, 50%, 0.5) /* Mới: space-separated + slash cho alpha */ rgb(255 0 0 / 0.5) rgb(100% 0% 0% / 50%) hsl(120 100% 50% / 0.5) /* Hỗ trợ cả % cho R,G,B */ rgb(100% 0% 0% / 50%) /* Tương đương rgba(255,0,0,0.5) */
Hỗ trợ trình duyệt
- RGBA (comma): IE9+, tất cả hiện đại
- Space-separated syntax: Chrome 65+, Firefox 52+, Safari 12.1+, Edge 79+
- Fallback cho IE8-: dùng filter (không khuyến nghị) hoặc solid color fallback