Easy Transparency with RGBA and Opacity

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

The use of PNG files in Web design (http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/) has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.

1 rgba(200, 54, 54, 0.5);
2 /* example: */
3 background: rgba(200, 54, 54, 0.5);
4 /* or */
5 color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.

Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

1 color: #000;
2 opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

As used by: 24 Ways (http://24ways.org) (RGBA).

See also: