<tip id='1529' />

Tạo nền trong suốt không ảnh hưởng đến nội dung bên trong

Để tạo trong suốt cho một đối tượng, ta dùng opacity để thực hiện. Nhưng nhược điểm của opacity là sẽ làm cho toàn bộ đối tượng và các con của nó đều bị ảnh hưởng.

Ví dụ:

<div style="background-image: url(cloud.jpg); width: 150px; padding: 40px 40px">
	<div style="background-color: rgb(255, 165, 0); opacity: 0.5; padding: 40px 40px">
		<div style="background: red; padding: 20px 20px;">TEK</div>
	</div>
</div>
TEK

 
 
Bạn có thể dụng ảnh png trong suốt để giải quyết được vấn đề này:

<div style="background-image: url(cloud.jpg); width: 150px; padding: 40px 40px">
	<div style="background-image: url(orange_50.png); padding: 40px 40px">
		<div style="background: red; padding: 20px 20px;">TEK</div>
	</div>
</div>

Nhược điểm của phương pháp này là bạn phải chuẩn bị một file ảnh png với độ trong suốt nhỏ hơn 100% và bất tiện khi muốn thay đổi màu nền thì lại phải làm file ảnh khác.
 
 
Dùng màu nền trong suốt:

<div style="background-image: url(cloud.jpg); width: 150px; padding: 40px 40px">
	<div style="background-color: rgba(255, 165, 0, 0.5); padding: 40px 40px">
		<div style="background: red; padding: 20px 20px;">TEK</div>
	</div>
</div>
TEK

Nhược điểm của phương pháp này là chỉ hỗ trợ ở các trình duyệt có hỗ trợ CSS3 nhưng các trình duyệt phổ biến hiện tại đều đã hỗ trợ hết rồi.

Chúc bạn thành công

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!