Cross Browser RGBa Support

Cross Browser RGBa Support

Yet another very nice feature, that gives to us the CSS3 specification, is the RGBa (stands for Red Green Blue Alpha) property. RGBa is used to create a semi-transparent background of some HTML element.

Compared with the opacity CSS property (which also makes a translucent background), RGBa does not makes the contents of a HTML element semi-transparent.

As well as other CSS3 properties, (like box-shadow, border-radius), all the modern browsers (FireFox, Safari, Chrome, Opera) excellent supports the RGBa property, but only not Internet Explorer.

However, there is a simple way to make cross browser RGBa support, i.e. even in IE, moreover in all popular versions: IE6, IE7 and IE8.

RGBa CSS3 Definition For Modern Browsers

It looks like this:

.style {
	background: rgba(255,204,000,0.5);

In this example we are using RGB format of this color: #FFCC00, and apply the 50% opacity.

RGBa Support For Internet Explorer

The following code emulates the RGBa in IE6, IE7 and IE8:

.style {
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFCC00,endColorstr=#7FFFCC00);

RGBa represented here as a hex code and looks like #AARRGGBB, where the AA is the alpha value in hex format.

This code for Internet Explorer I recommend to put in a separate file and connect to the site with conditional comments.

A you can see, everything is simple.

Lastly, I want to advise you the RGBa CSS Generator for Internet Explorer. Enough to specify the RGBa definition in the form, and you will get IE version of RGBa.

Cоmmеnts (6):
  1. 1

    Nice. Thank you for this solution!

  2. 2

    Dimox – you rock!

  3. 3
    Daniels said:

    In IE 8 you have to put -ms- in front of filter. Also everything between -ms-filter: and the closing semicolon has to be in quotes or else in won’t work correctly.

  4. 4

    thanks men ;)

  5. 5

    I would not use filters at all. They will break any kind of transparency for any kind of element that is on top of them. They will also break font-smoothing, which is another form of transparency.

    I would opt for a 1×1 pixel png embedded in a data-uri.

Lеаvе а Соmmеnt

© 2009–2022  •  Privacy Policy