O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adjusting the Opacity of Background Colors

Problem

You want to set the opacity of an element’s background color.

Solution

Set the transparency of an element’s background color using the RGBA value, as shown in Figure 5-21:

#number4 {
 background-color: rgba(255, 255, 0, .4);
}
A transparent background color

Figure 5-21. A transparent background color

Discussion

Firefox 3 and later, Opera 10 and later, and Safari support RGBA for setting the background color along with a transparent value. When working in cross-browser development, set the background-color property first with traditional color coding (RGB, hexadecimal, etc.), and then use another background-color property beneath it with a value set in RGBA:

#number4 {
 background-color: rgb(255, 255, 0);
 background-color: rgba(255, 255, 0, .4);
}

This allows browsers such as Internet Explorer and Firefox 2 to at least render the background color, while Firefox 3, Opera 10 and later, and Safari users see the transparency. Another tactic is to not use color values, but instead use a small, tiled PNG image processed through a digital imaging program such as Adobe Photoshop or Adobe Fireworks set through the background-image property. For more information on this technique, see Setting a Background Image.

Supporting Internet Explorer

Through the use of the gradient filter property available in Internet Explorer 5.5 and later, it’s possible to create transparency on a background ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required