# Phong Cách Thiết Kế Web Ảnh nền mờ, chữ nổi rõ.

Nguồn: https://manhan.ai.vn/thiet-ke-web-anh-nen-mo-chu-ro/

Ngày đăng: 2026-11-06
Chuyên mục: Phong cách thiết kế website

**Thiết kế web ảnh nền mờ** phủ một lớp màu lên ảnh để chữ dễ đọc, vừa giữ được cảm xúc của ảnh vừa làm rõ thông điệp và nút liên hệ. Phong cách **Ảnh nền mờ, chữ nổi rõ** chỉ đạt khi độ tối lớp phủ được tính theo từng loại ảnh, không đặt một mức cho mọi ảnh.

Dưới đây là công thức cho bốn loại ảnh, kèm phép tính tương phản có thể tự làm lại. Mẫu tham chiếu nằm trong [thư viện giao diện Mạnh An AI](https://manhan.ai.vn/#giao-dien).

**Biên soạn:** Ban biên tập Mạnh An AI, dịch vụ thiết kế website của Công Ty TNHH Mạnh An Service, phục vụ khách hàng trên toàn quốc. **Cập nhật:** 06/11/2026.

[![Mẫu thiết kế web ảnh nền mờ cho đơn vị sửa chữa nhà](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-anh-nen-mo-chu-noi-ro.webp)](https://manhan.ai.vn/wp-content/uploads/2026/10/phong-cach-thiet-ke-website-anh-nen-mo-chu-noi-ro.webp)

Mẫu minh họa thương hiệu Sửa Nhà An Tâm. Tên, số lượng công trình, diện tích, lời khách, địa chỉ, email và số điện thoại trong ảnh đều là nội dung minh họa, không phải dữ liệu thật.

## Mẫu Sửa Nhà An Tâm phủ ảnh ra sao?

Mẫu dùng lớp phủ xanh đậm chuyển dần theo chiều ngang: dày ở bên trái nơi có chữ, tan hết trước khi tới hai người trong ảnh. Nhờ vậy, tiêu đề trắng “Làm mới nhà. Giữ trọn an tâm.” đọc rõ mà gương mặt không bị che.

Mẫu còn hai chỗ khác dùng cùng ý: dải mời cuối trang phủ xanh đậm lên ảnh phòng khách, và khối đội thợ cho ảnh mờ dần sang nền trắng để đặt chữ tối. Đo màu nền quanh tiêu đề trên ảnh tĩnh của mẫu, độ tương phản với chữ trắng ước khoảng 11:1 trở lên, cao hơn nhiều mức 4,5:1.

Điểm cần cân nhắc là dòng mô tả kéo dài tới gần chỗ lớp phủ bắt đầu tan. Khi làm thật, hãy kiểm tra đầu dòng cuối cùng trên đúng ảnh và đúng cỡ màn hình, vì ảnh chụp tĩnh không cho biết trang co giãn thế nào.

## Tính tương phản theo công thức WCAG thế nào?

Hãy lấy màu nền sau khi trộn lớp phủ, tính độ sáng tương đối của nền và chữ, rồi chia theo công thức. Theo [tiêu chí tương phản tối thiểu của WCAG](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), chữ thường cần ít nhất 4,5:1, chữ lớn cần 3:1.

1. **Trộn màu:** mỗi kênh R, G, B của nền mới bằng độ phủ nhân màu lớp phủ, cộng phần còn lại nhân màu ảnh.
2. **Đổi về tuyến tính:** lấy kênh chia 255; nếu kết quả không quá 0,04045 thì chia 12,92, còn lại thì cộng 0,055, chia 1,055 rồi lũy thừa 2,4.
3. **Tính độ sáng L:** L = 0,2126 R + 0,7152 G + 0,0722 B.
4. **Tính tỉ lệ:** lấy (L sáng hơn + 0,05) chia (L tối hơn + 0,05).

Ví dụ với ảnh trời biển sáng màu #E8EEF0, lớp phủ xanh #0B3C49 phủ 70%. Nền mới khoảng rgb(77, 113, 123), độ sáng khoảng 0,149. Chữ trắng có L = 1, nên tỉ lệ là 1,05 chia 0,199, được khoảng 5,27:1, vượt mức 4,5:1.

Các màu ảnh trong phép tính này là màu đại diện để minh họa, không phải số đo của một ảnh cụ thể. Ảnh thật cần được đo ngay tại vùng sáng nhất phía sau chữ.

## Công thức cho ảnh sáng là gì?

Ảnh sáng cần lớp phủ dày nhất, thường là chuyển dần từ phía có chữ để giữ phần trời và nước. Với chữ trắng trên màu #E8EEF0 và lớp phủ #0B3C49, cần khoảng 65% để đạt 4,5:1 và 48% cho chữ lớn đạt 3:1.

| Độ phủ của lớp #0B3C49 trên nền #E8EEF0 | Tương phản với chữ trắng | Đủ cho |
| --- | --- | --- |
| Không phủ | 1,17:1 | Không đủ |
| 40% | 2,53:1 | Không đủ |
| 50% | 3,18:1 | Chữ lớn |
| 60% | 4,06:1 | Chữ lớn |
| 70% | 5,27:1 | Mọi cỡ chữ |

Vì phủ đều 70% sẽ làm mất hết nắng, hãy gom lớp phủ về nửa dưới hoặc một bên, phần ảnh còn lại vẫn trong trẻo.

## Công thức cho ảnh tối là gì?

Ảnh tối gần như không cần phủ thêm, chỉ cần xử lý các điểm sáng nằm sau chữ. Chữ kem #F2E8D8 trên nền nâu tối #3A2A20 đã đạt khoảng 11,3:1 khi chưa có lớp phủ.

Điều đáng ngại ở ảnh tối là những điểm rất sáng như lửa, đèn hoặc ly thủy tinh. Một lớp phủ tối chuyển dần từ phía có chữ sẽ đẩy các điểm đó ra xa dòng chữ mà không làm phẳng cả ảnh.

## Công thức cho ảnh nhiều chi tiết là gì?

Ảnh nhiều chi tiết nên có lớp phủ đều, đủ dày để các nét nhỏ không tranh với dấu tiếng Việt. Với chữ trắng trên điểm sáng #D9B7D0 và lớp phủ tím #4B2354, cần khoảng 52% để đạt 4,5:1.

Tương phản đạt yêu cầu chưa chắc đã dễ đọc, vì chi tiết rậm vẫn làm nhiễu nét chữ. Hãy làm mờ nhẹ ảnh hoặc chọn phần ảnh ít chi tiết hơn, rồi tự đọc thử trên điện thoại.

## Công thức cho ảnh có người là gì?

Ảnh có người nên để lớp phủ tránh khuôn mặt, chữ đặt về phía trống của ảnh. Với chữ trắng trên màu da sáng đại diện #E0B090 và lớp phủ đen, cần khoảng 37% để đạt 4,5:1, nhưng tốt nhất không nên đặt chữ lên mặt người.

Hãy chọn ảnh có khoảng trống một bên và người nhìn về phía chữ. Trên điện thoại, ảnh bị cắt hẹp nên chữ dễ chạm mặt; khi đó nên đổi phần ảnh được giữ lại hoặc đưa chữ xuống dưới ảnh. Nút liên hệ cũng cần đủ lớn và dễ tìm.

## Ba ngành áp dụng công thức nào?

Với thiết kế web ảnh nền mờ, tour biển dùng lớp phủ dâng từ đáy, nhà hàng dùng dải tối bên trái, còn trang trại nho phủ đều cả ảnh. Cả ba đều là thương hiệu giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.

### Tour biển đảo: ảnh sáng, phủ từ dưới lên

[![Thiết kế web ảnh nền mờ cho tour biển đảo giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-anh-nen-mo-chu-ro-tour-bien-dao-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-anh-nen-mo-chu-ro-tour-bien-dao-chi-tiet.webp)

Giao diện minh họa công ty tour giả định Đảo Xanh: vịnh có thuyền gỗ, bốn đảo mang tên giả định, sáu hoạt động và dải hoàng hôn.

Công ty giả định Đảo Xanh để lớp xanh dâng từ góc dưới bên trái vịnh biển, trên đó là “Ra đảo, chậm lại.” Bốn thẻ đảo mang tên giả định cũng đặt chữ trên một dải xanh đậm ở chân ảnh. Câu “Mỗi đảo một màu nước” nằm trên ảnh nước sáng và lớp phủ mỏng hơn, nên là chỗ cần đo lại nếu làm thật.

### Nhà hàng bít tết: ảnh tối, dải đen bên trái

[![Giao diện ảnh nền mờ cho nhà hàng bít tết giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-anh-nen-mo-chu-ro-bit-tet-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-anh-nen-mo-chu-ro-bit-tet-chi-tiet.webp)

Giao diện minh họa nhà hàng giả định Lửa Than: miếng thịt trên chảo, bốn phần thịt, năm độ chín, ba món kèm và bốn bước nướng.

Nhà hàng giả định Lửa Than để tiêu đề kem trên vùng tối bên trái, còn miếng thịt và ngọn lửa giữ nguyên sắc độ bên phải. Bốn thẻ phần thịt đặt chữ trắng ở chân ảnh, nơi đã tối sẵn. Dải cuối trang chuyển từ cam đậm sang ảnh đầu bếp, nên chữ nằm trên phần màu đặc thay vì lên người.

### Trang trại nho: ảnh nhiều chi tiết, phủ đều

[![Giao diện ảnh nền mờ cho trang trại nho giả định](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-anh-nen-mo-chu-ro-trang-trai-nho-chi-tiet.webp)](https://manhan.ai.vn/wp-content/uploads/2026/11/thiet-ke-web-anh-nen-mo-chu-ro-trang-trai-nho-chi-tiet.webp)

Giao diện minh họa trang trại giả định Vườn Nho Nắng: giàn nho phủ tím, ba thẻ vườn, bốn loại nho, bốn bước thăm vườn và ba giỏ nho.

Trang trại giả định Vườn Nho Nắng có giàn nho rất rậm, nên toàn bộ banner được phủ tím để tiêu đề trắng nổi lên ở giữa. Ảnh người hái nho lại dùng cách khác: dải xanh lá chuyển dần ở bên phải, gương mặt không bị che. Dải hoàng hôn cuối trang có chữ trắng trên trời cam, là chỗ nên kiểm tra kỹ vì lớp phủ khá mỏng.

## 12 ngành khác nên dùng lớp phủ nào?

Ngành có ảnh ngoài trời thường cần lớp phủ chuyển dần, ngành có không gian tối cần rất ít, còn ngành có ảnh rậm cần phủ đều. Dưới đây là 12 ngành khác cùng công thức nên thử trước.

- **Khu nghỉ dưỡng:** phủ từ dưới lên ảnh hồ bơi.
- **Trường dạy lướt ván:** phủ một bên ảnh biển sáng.
- **Trang trại chè:** phủ đều đồi chè nhiều chi tiết.
- **Vườn hoa du lịch:** phủ đều, giữ chữ ít và ngắn.
- **Quán bar:** ảnh tối, chỉ tránh điểm sáng của đèn.
- **Rạp phim nhỏ:** ảnh tối, thêm dải tối dưới tiêu đề.
- **Nhà hàng lẩu nướng:** ảnh tối, dải đen phía có chữ.
- **Phòng khám thẩm mỹ:** ảnh có người, chữ đặt phía trống.
- **Đội thợ điện lạnh:** ảnh có người, phủ một bên như mẫu gốc.
- **Trung tâm huấn luyện thể thao:** ảnh có người, phủ chéo theo hướng chuyển động.
- **Công ty xây dựng:** ảnh công trình nhiều chi tiết, phủ đều màu thương hiệu.
- **Bất động sản nghỉ dưỡng:** ảnh toàn cảnh sáng, phủ dần từ trên trời xuống.

## Khi nào không nên chọn thiết kế web ảnh nền mờ?

Không nên chọn thiết kế web ảnh nền mờ khi chi tiết trong ảnh chính là thứ khách cần xem, như màu sản phẩm hay đường may. Lớp phủ luôn làm đổi màu ảnh, nên trang bán sản phẩm cần màu chính xác nên đặt chữ ngoài ảnh.

Nếu ảnh đủ tốt để đứng một mình, [bố cục ảnh tràn màn hình](https://manhan.ai.vn/thiet-ke-web-anh-tran-man-hinh/) là phiên bản rộng hơn của ý này. Khi cả trang tối, không chỉ riêng ảnh, hãy xem [giao diện nền tối có điểm sáng](https://manhan.ai.vn/thiet-ke-web-nen-toi-diem-sang/). Còn nếu ảnh nên giữ nguyên, [kiểu ảnh lớn đặt tách chữ](https://manhan.ai.vn/thiet-ke-web-anh-lon-an-tuong/) sẽ an toàn hơn.

## Câu hỏi thường gặp về thiết kế web ảnh nền mờ

Chữ nên là chữ thật trên trang, đo tại vùng sáng nhất sau chữ, và đổi ảnh thì phải tính lại.

**Có nên ghi chữ thẳng vào ảnh không?**

Không nên. Chữ trong ảnh không chọn được, khó dịch và không co giãn theo màn hình. Hãy dùng chữ và lớp phủ thật trên trang.

**Công cụ đo màu có đo được chữ trên ảnh không?**

Công cụ tự động thường khó đo chữ trên ảnh. Hãy lấy màu tại vùng sáng nhất phía sau chữ rồi tính thủ công theo công thức trên.

**Nếu đổi ảnh thì có phải tính lại không?**

Có. Mỗi ảnh có vùng sáng khác nhau. Hãy lưu độ phủ theo từng ảnh hoặc chọn một độ phủ an toàn cho loại ảnh sáng nhất.

## Nên làm gì trước khi chọn thiết kế web ảnh nền mờ?

Hãy mở ảnh bạn định dùng, chọn đúng vùng đặt chữ, lấy màu sáng nhất ở đó và tính theo bốn bước trên. Nếu độ phủ cần thiết làm mất hết cảm xúc của ảnh, đó là lúc nên đổi ảnh.

Khi đã có kết quả ấy, bạn có thể đọc [các bước Mạnh An AI thiết kế và bàn giao website](https://manhan.ai.vn/quy-trinh-thiet-ke-website/) và xem [bảng giá thiết kế website AI](https://manhan.ai.vn/bao-gia-thiet-ke-website/). Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể [gửi ảnh và thông điệp để trao đổi](https://manhan.ai.vn/lien-he-thiet-ke-website/) trước khi bắt đầu.

### Thông tin đơn vị

**Đơn vị:** Công Ty TNHH Mạnh An Service
 **Dịch vụ:** Mạnh An AI – Thiết kế website
 **Phạm vi phục vụ:** Khách hàng trên toàn quốc
 **Địa chỉ văn phòng:** Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
 **Điện thoại:** [083.5431.678](tel:0835431678)
 **Email:** [info@manhan.vn](mailto:info@manhan.vn)