CSS Color Transparency/Opacity

This page shows a example of using CSS3's transparency/opacity feature.

You can specify transparency/opacity, as the 4th argument to “hsla” or “rgba”.

Syntax

div.xyz {background-color:hsla(‹hue›, ‹saturation›, ‹lightness›, ‹opacity›);}

or

div.xyz {background-color:rgba(‹red›, ‹green›, ‹blue›, ‹opacity›);}

0 ≤ ‹opacity› ≤ 1

Example

Here's text on top of a image. The text's background has increasingly higher opacity.

Here's the code:

<div style="background-image:url(i/ball_shadow.png);
width:640px; height:480px;
font-size:100px">
<span style="background-color:hsla(120, 100%, 50%, 0.0)">0.0</span>
<span style="background-color:hsla(120, 100%, 50%, 0.1)">0.1</span>
<span style="background-color:hsla(120, 100%, 50%, 0.2)">0.2</span>
<span style="background-color:hsla(120, 100%, 50%, 0.3)">0.3</span>
<span style="background-color:hsla(120, 100%, 50%, 0.4)">0.4</span>
<span style="background-color:hsla(120, 100%, 50%, 0.5)">0.5</span>
<span style="background-color:hsla(120, 100%, 50%, 0.6)">0.6</span>
<span style="background-color:hsla(120, 100%, 50%, 0.7)">0.7</span>
<span style="background-color:hsla(120, 100%, 50%, 0.8)">0.8</span>
<span style="background-color:hsla(120, 100%, 50%, 0.9)">0.9</span>
<span style="background-color:hsla(120, 100%, 50%, 1.0)">1.0</span>
</div>

This is supported in all browsers as of 2012-04-20.

See also: CSS3 HSL (Hue, Saturation, Lightness) Color Samples.

Reference

http://www.w3.org/TR/css3-color/