CSS Transparency Cho Tất Cả Các Trình Duyệt

Transparency ( độ trong suốt ) là một trong những thuộc tính của CSS đòi hỏi rất nhiều các thuộc tính và giá trị khác nhau để đảm bảo khả năng tương thích với các trình duyệt. Để làm được điều này, bạn cần một nhóm các câu lệnh CSS. May mắn thay chúng không can thiệp vào nhau, vì vậy sử dụng chúng khi nào bạn muốn mà không cần phải lo lắng. Ví dụ sau được thiết lập 50% transparency:

.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 

	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

Mình khuyên bạn nên sử dụng định dạng sau, chỉ đơn giản copy & paste:

.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

 

Related Post


3 Giải Pháp Hỗ Trợ Hiệu Quả Trên Internet Explorer
Friday, March 14, 2014
Trước kia, Internet Explorer ( IE ) là một trình duyệt tiến bộ nhất. Nhưng sau một khoảng thời gian ngưng phát triển, IE đã trở thành ‘thảm họa’ đối với các nhà thiết kế web như chúng ta. Microsoft đã cải tiến và cập nhật trình duyệt của họ, nhưng sự thật là IE vẫn đang tụt hậu một chút so với các trình duyệt dựa trên WebKit và Firefox...
Tạo Marquee nâng cao với CSS3 Animation
Thursday, October 24, 2013
Thông thường hiệu ứng Marquee mang lại cho chúng ta cảm giác khá nhàm chán, với dòng chữ chạy từ phải sang trái hoặc ngược lại. Còn nữa , khi chạy thường thì rất khó đọc chữ  mà còn hay bị giật
Search

Đăng ký nhận bài mới


Category

Blog Archive