rgba() overlay trên ảnh hero | opacity vs nền bán trong suốt【2026】

Landing outsourcing Việt Nam hay gặp cảnh này: Figma ghi Black 40% trên ảnh hero đẹp, junior gắn opacity: 0.4 lên .hero — ảnh mờ đúng, nhưng tiêu đề và nút cũng mờ. Reviewer bảo “chữ không đạt contrast”. Bài này giải đúng bài toán rgba overlay trên ảnh hero: khi nào dùng rgba(), khi nào opacity, alpha nào hay dùng, và cách tránh lỗi handoff.

Đây không phải bài convert HEX↔RGBA thuần. Nếu chỉ cần đổi mã, vào thẳng công cụ RGBA ↔ HEX. Ở đây tập trung lớp phủ trong suốt trên ảnh — pattern CSS bạn dùng mỗi lần làm landing.

Bài viết này giúp bạn

• Hiểu 4 số trong rgba() và vì sao alpha là chìa khóa overlay
• Phân biệt opacity vs rgba() trên hero có chữ
• Chọn alpha 0.3–0.6 theo ảnh sáng/tối
• Viết pattern ::before và linear-gradient
• Checklist contrast + case freelance / team outsourcing
• Đổi token Figma sang CSS khi cần HEX8

---

Vấn đề thật: chữ trên ảnh hero

Ảnh hero full-bleed đẹp nhưng độ sáng không đều. Chữ trắng trên vùng trời sáng thì đọc được; trên vùng áo trắng hoặc đèn flash thì mất. Designer thường thêm scrim / overlay — một lớp đen (hoặc brand) bán trong suốt.

Trong CSS, lớp đó hầu như luôn là:

background-color: rgba(0, 0, 0, 0.45);
/* hoặc */
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));

Không phải:

.hero {
  opacity: 0.45; /* làm mờ cả chữ bên trong */
}

Nếu bạn đang search “rgba độ trong suốt”, “overlay CSS ảnh”, “opacity vs rgba” — đây là ngữ cảnh đúng: làm nền/ảnh dịu đi, giữ UI đọc được.

---

rgba() là gì (đủ để làm overlay)

rgba(R, G, B, A) = đỏ, lục, lam (0–255) + alpha (0 = trong suốt hoàn toàn, 1 = đặc hoàn toàn).

Thành phần	Phạm vi	Ý nghĩa trên overlay
R, G, B	0–255	Màu lớp phủ (thường đen 0,0,0 hoặc brand)
A	0–1	Độ đậm của lớp phủ. 0.4 = 40% đặc

Ví dụ đọc nhanh:

• rgba(0, 0, 0, 0.4) — đen 40% đặc → che ảnh vừa phải
• rgba(255, 255, 255, 0.85) — trắng gần đặc → panel kính mờ trên ảnh
• rgba(15, 23, 42, 0.6) — slate đậm (gần Tailwind slate-900) 60%

CSS hiện đại khuyến nghị dạng slash (cùng nghĩa với rgba()):

background: rgb(0 0 0 / 0.4);
/* tương đương */
background: rgba(0, 0, 0, 0.4);

Code mới: ưu tiên rgb(... / ...). Code cũ / snippet Figma: vẫn gặp rgba() rất nhiều — cả hai trình duyệt đều hiểu.

---

opacity vs rgba() — bảng quyết định hero

Đây là chỗ team hay sai khi nhận file từ designer.

Quy tắc một câu: cần đọc chữ trên ảnh → đụng tới màu (rgba / gradient), đừng đụng opacity của cha.

opacity vẫn hữu ích: hover fade icon, skeleton, chuyển cảnh. Chỉ đừng gắn lên container chứa headline.

---

Pattern CSS: overlay trên ảnh hero

1) Pseudo-element (dễ chỉnh alpha)

.hero {
  position: relative;
  min-height: 70vh;
  background: url("/images/hero.jpg") center / cover no-repeat;
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 1; /* chữ nằm trên overlay */
}

Đổi chỉ số 0.45 là chỉnh độ tối — không đụng markup chữ.

2) Gradient một lớp (ngắn gọn)

.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25)),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}

Phù hợp khi chữ nằm nửa dưới: trên đậm hơn, dưới nhẹ hơn để ảnh vẫn “thở”.

3) Panel kính (trắng bán trong suốt)

Landing SaaS hay đặt card form trên hero:

.hero-panel {
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a; /* chữ đậm trên panel sáng */
  backdrop-filter: blur(8px); /* tùy chọn, không thay rgba */
}

backdrop-filter làm kính mờ; contrast chữ vẫn phụ thuộc nền rgba đủ đặc. Đừng chỉ blur rồi để chữ xám nhạt.

---

Bảng alpha hay dùng (bookmark)

Không có số thần kỳ — nhưng có điểm xuất phát khi chụp ảnh stock hoặc ảnh sản phẩm Việt (quán cafe, văn phòng, sự kiện):

Alpha	CSS	Cảm giác	Gợi ý
0.25	rgba(0,0,0,0.25)	Nhẹ	Ảnh đã tối / tối tối
0.35	rgba(0,0,0,0.35)	Vừa	Hero outdoor chiều tối
0.45	rgba(0,0,0,0.45)	An toàn mặc định	Hầu hết stock sáng
0.55	rgba(0,0,0,0.55)	Đậm	Trời nắng, tường trắng
0.7+	rgba(0,0,0,0.7)	Rất đậm	Modal backdrop, ít khi hero full

Brand tint (ví dụ xanh #0ea5e9):

background: rgba(14, 165, 233, 0.35);

Tint mạnh dễ “lệch màu” ảnh — thường alpha thấp hơn overlay đen thuần.

---

Handoff Figma → CSS (chỗ cần tool)

Designer gửi #000000 + Opacity 40%, hoặc HEX8 #00000066. Dev cần rgba(0,0,0,0.4).

Công thức nhanh: alpha CSS ≈ phần trăm ÷ 100. HEX8: hai số cuối = round(alpha × 255) → hex.

Figma / token	CSS
Black 40%	rgba(0,0,0,0.4) / rgb(0 0 0 / 0.4)
#00000080	≈ 50% → rgba(0,0,0,0.5)
#FFFFFFE6	≈ 90% trắng → panel

Tính nhầm 0.4 thành #40 (sai) hoặc quên nhân 255 là chuyện thường xuyên trên PR. Mở chuyển RGBA ↔ HEX, dán #00000066 hoặc rgba(0,0,0,0.4), copy kết quả — chạy local trên trình duyệt, không upload file thiết kế.

Bài convert sâu (bảng HEX8, edge case) thuộc topic khác; ở đây chỉ cần đủ số đúng để dán vào overlay.

---

Contrast: overlay chưa đủ nếu chưa đo

Overlay giúp trung bình, nhưng WCAG đo trên pixel thật sau khi blend ảnh + lớp phủ.

Checklist nhanh trước khi merge:

1. Chụp screenshot hero (Chrome DevTools device mode + desktop)
2. Lấy màu chữ và màu đã blend (eyedropper) — không lấy màu trước overlay
3. Text AA cho chữ lớn (thường ≥ 3:1), chữ thường ≥ 4.5:1
4. Thử crop mobile: vùng sáng khác → có thể cần alpha cao hơn hoặc scrim cục bộ dưới chữ
5. CTA: nút solid thường an toàn hơn chữ trắng mỏng trên ảnh

Nếu contrast fail: tăng alpha 0.05–0.1, thêm text-shadow: 0 1px 2px rgba(0,0,0,0.4), hoặc box scrim chỉ dưới khối typography.

---

5 lỗi thường gặp

1. opacity trên .hero

Chữ và CTA mờ theo. Sửa: bỏ opacity, thêm ::before với rgba.

2. Overlay cùng z-index với chữ

::before che mất headline. Sửa: overlay z-index: 0, content z-index: 1, cha position: relative.

3. Alpha copy nguyên từ mock sáng

Mock Figma dùng ảnh tối; production đổi ảnh marketing sáng hơn → chữ mất. Luôn re-check trên ảnh final.

4. Chỉ dùng filter: brightness() trên ảnh

brightness(0.6) làm tối ảnh nhưng khó tách lớp với chữ; team khác đọc code khó hơn rgba rõ ràng. Ưu tiên overlay tường minh.

5. Quên dark mode / theme

Hero marketing thường cố định ảnh + overlay. Đừng đảo color-scheme làm chữ thành đen trên overlay đen.

---

Case study

Case 1: Freelance — landing quán cafe

Tình huống: Ảnh bàn gỗ sáng, logo và slogan trắng. Client bảo “chữ bay trên ảnh”.

Làm: ::before với rgba(0,0,0,0.5); trên mobile tăng 0.55 vì crop cắt vùng cửa sổ sáng.

Tránh: opacity: 0.5 trên section — nút “Đặt bàn” cũng mờ, conversion giảm.

Case 2: Outsourcing — handoff Figma #0F172A99

Tình huống: Token slate + alpha hex. Dev đoán 0.99 (sai) thay vì ≈ 0.6 (99 hex ≈ 153/255).

Làm: Dán #0F172A99 vào RGBA ↔ HEX → nhận rgba(15,23,42,0.6) → gắn gradient hero.

Bài học: Đừng đoán HEX alpha; tool 10 giây rẻ hơn một vòng review.

Case 3: SaaS — form trên hero

Tình huống: Form đăng ký trên ảnh team. Chữ input xám trên kính quá trong.

Làm: Panel rgba(255,255,255,0.92) + blur nhẹ; label #0f172a. Overlay toàn hero giữ 0.35 để brand ảnh còn thấy quanh form.

---

Khi nào dùng gì

---

Tóm tắt

• rgba() / rgb(... / ...) = màu + độ trong suốt trên một thuộc tính màu — vũ khí chính cho overlay hero.
• opacity = cả cây DOM; tránh trên khối chứa headline.
• Alpha khởi đầu 0.4–0.5 cho ảnh sáng; chỉnh theo screenshot thật.
• Pattern ổn định: ::before + z-index hoặc gradient + url().
• Token Figma HEX8 → xác nhận bằng công cụ RGBA ↔ HEX trước khi merge.

Làm đúng một lần, mỗi landing sau chỉ việc chỉnh số alpha — không còn vòng “chữ mờ vì opacity”.

---

Bài liên quan