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.
Chia sẻ bài viết:
Bình luận
Post new comment