Tìm hiểu sự khác biệt giữa màu RGB và RGBa trong CSS và cách dùng RGBa tạo UI component đẹp, thu hút cho website.
RGB và RGBa là hai mô hình màu dùng trong CSS, thay thế cho mã màu Hex (như #282828).
Khác biệt giữa RGB và RGBa là gì?
- RGB là viết tắt của Red, Green, và Blue (Đỏ, Xanh lá, Xanh dương)
- RGBa là viết tắt của Red, Green, Blue, và Alpha
Alpha là kênh độ trong suốt, dùng để kiểm soát mức độ trong suốt của một màu.
Nếu bạn băn khoăn, đừng lo, sẽ hiểu ngay thôi.
Để dùng RGB và RGBa, CSS cung cấp hai hàm màu rgb() và rgba().
Cả hai hàm đều dùng để thêm màu nền với giá trị từ 0 đến 255 trên thang đo đỏ, xanh lá, xanh dương.
Tuy nhiên, rgb() chỉ dùng để thêm màu nền đặc (solid):
{ /* 100% xanh lá đặc */ background-color: rgb(0, 255, 0); }Trong khi đó, RGBa linh hoạt hơn RGB vì cho phép thêm độ trong suốt qua kênh alpha:
{ /* 50% trong suốt xanh lá */ background-color: rgba(0, 255, 0, 0.5); }Tại sao thêm độ trong suốt cho màu nền lại hữu ích?
Ví dụ, giả sử bạn muốn thiết kế UI Card thu hút cho website, như sau:
UI Card trên có:
- Hình thumbnail
- Một overlay
- Một số text ở trên cùng.
Tôi dùng hàm rgba() để dùng kênh Alpha kiểm soát độ hiển thị của hình nền so với text. Tôi chọn 50% độ trong suốt đen cho overlay UI Card:
.card-overlay { background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */ }Tại sao tôi dùng 50% độ trong suốt?
Có thể là 40% hoặc 60% như nhau. Tôi cũng có thể dùng linear-gradient với hai mức độ trong suốt khác nhau. Tùy loại giao diện bạn muốn.
Độ trong suốt alpha cao vs thấp:
- Giá trị alpha càng thấp (như
0.1), càng trong suốt, hình nền càng hiển thị rõ. - Giá trị alpha càng cao (như
0.9), càng ít trong suốt, hình nền càng ít hiển thị.
Như bạn thấy trong so sánh dưới đây, giá trị alpha ảnh hưởng đến độ đọc và mood của trình bày:
Bạn không muốn overlay quá sáng hoặc quá tối.
Mọi thứ là tìm "điểm ngọt" (sweet spot) phù hợp với cách bạn muốn trình bày nội dung cho người dùng.
Code ví dụ
Dưới đây là toàn bộ HTML và CSS từ ví dụ UI Card.
HTML
<div class="card"> <div class="card-overlay"></div> <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" /> <div class="card-text"> <h3 class="card-title">The North Sea of Denmark</h3> <p class="card-description"> Khám phá Biển Bắc Đan Mạch đẹp mắt & động — nơi mỗi ngày là trải nghiệm mới. </p> </div> </div>CSS
.card { position: relative; height: 400px; width: 400px; } .card-thumbnail { height: 100%; width: 100%; display: block; object-fit: cover; } .card-text { color: white; position: absolute; width: 80%; max-width: 300px; top: 70%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .card-title { font-size: 1.45rem; } .card-description { font-size: 1.15rem; margin-top: 0.5rem; line-height: 1.4; } .card-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }Dùng làm tham chiếu hoặc điểm khởi đầu cho UI Card của bạn.