CSS Opacity

Đăng bởi Neo trong mục Hướng dẫn vào 25 tháng 11, 2009 | Comments

Bài viết được dịch lại từ quirksmode.org
Tác giả: ppk

Làm thế nào để đặt độ trong suốt cho một element trên website?

Ví dụ:

Đoạn văn không trong suốt.

Đoạn văn trong suốt sử dụng opacity

Đoạn văn trong suốt sử dụng filter

Đoạn văn trong suốt sử dụng -ms-filter

Mã CSS

.test {
	background-color: #6374AB;
	width: 100%;
	color: #ffffff;
}

.opaque1 {	/* Áp dụng cho tất cả các trình truyệt trừ IE */
	opacity: .5;
}

.opaque2 {	/* Áp dụng cho IE5, 6, 7 */
	filter: alpha(opacity=50);
}

.opaque3 {	/* Áp dụng cho IE8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

Nếu bạn muốn áp dụng thuộc tính trong suốt cho tất cả các phiên bản IE, bạn phải đặt thuộc tính theo thứ tự : 

.opaque {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* Đầu tiên! */
	filter: alpha(opacity=50); /* Thứ hai! */
}

Nếu bạn không để theo thứ tự như vậy, khi chạy Compatible trong IE8 (render trang như IE7) bạn sẽ không thấy được element trong suốt. Vì lý do này, chúng ta hãy gửi lời cảm ơn tới Microsoft vì đã giúp việc phát triển web ngày càng khó hơn.

IEhack, css

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter

Các bài tương tự