Màu nền RGBa cho trình duyệt IE

CSS3 hiện đại đã cải tiến từ hệ màu RGB với việc thêm độ trong suốt chúng ta có hệ màu RGBa. Chúng ta đã quen dùng hệ màu theo dạng thập lục phân truyền thống bởi chúng giễ ràng hơn việc viết theo 3 màu cơ bản RGB(red,green,blue), nhưng với việc có thêm tham số alpha tạo độ trong suốt cho màu thì thiết kế của bạn sẽ vô cùng quyến rũ thậm chí còn hiệu quả hơn cả việc dùng ảnh nền png từ Photoshop.

RGBa hổ trợ hầu hết các trình duyệt hiện đại như Chrome, Safari 3, Firefox 3, Opera 10, thật đáng tiếc một điều trình duyệt IE hiện tại lại không hổ trợ 1 giá trị tuyệt vời như vậy. Tuy nhiên vẫn có cách đơn giản để tạo được mầu nền với sự trong suốt bằng việc sử dụng thuộc tính đặc biệt dành riêng cho trình duyệt IE với cú pháp sau:

filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);

Đây là cách thức để bạn tạo màu chuyển sắc cho trình duyệt IE nhưng có 1 điểm chú ý là chuỗi màu không phải là dạng thập lục phân truyền thống mà được thay bằng '#aaRRBBGG' yếu tố 'aa' ở trong chuỗi chính là hệ số alpha tạo độ trong suốt cho màu nó sẽ nhận giá trị từ 00 - 99, ví dụ:

background: rgba(94,146,41,0.4);
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr='#555e9229', EndColorStr='#555e9229');

Như ví dụ trên chúng ta sẽ viết màu nền rgba cho trình duyệt hiện đại trước và sau đó là dành cho IE, bạn cũng có thể viết riêng một file CSS dành cho trình duyệt IE rồi dùng bình luận điều kiện lọc trình duyệt IE để liên kết tới nó.

Có nhiều người còn dùng opacity để tạo trong suốt nhưng nó là trong suốt cho phần tử còn để tạo trong suốt cho màu nền thì bạn phải dùng màu nền dạng RGBa. Tóm lại bạn hoàn toàn có thể sử dụng cách viết theo hệ màu RGBa trong thiết kế web hiện đại để thay thế cho cách viết theo dạng thập lục phân truyền thống.