BLOG > Transparency with CSS3

Prior to the release of the RGBA element of CSS3, web designers had to use transparent background images and hacks to provide the illusion of opacity. With the RGBA element, we can now create opacity purely through CSS. The syntax looks like this:

1
2
3

div {
     background: rgba(94, 165, 168, 0.7);
}

Values assigned to the first three letters – RGB (red, green, blue) – establish the color of an element while the last letter – A (for alpha) – establishes its transparency. Alpha can be set between 0 (fully transparent) and 1 (fully opaque).

It is recommended to use a fallback color for those browsers that do not support the RGBA property:

1
2
3
4

div {
   background: rgb(94, 165, 168); /* fallback color */
   background: rgba(94, 165, 168, 0.7);
}

Internet Explorer versions 8 and below do not support RGBA. However, we can use a proprietary Microsoft element and a conditional tag to bring opacity to IE:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!--[if IE]>
 
   <style type="text/css">
 
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
 
    </style>
 
<![endif]-->

For further reading on the RGBA property, see:

http://css-tricks.com/rgba-browser-support/
http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/