CSS3 guide: 5.4. translucent colors

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

5.4. translucent colors

In addition to allow the setting of the opacity of entire elements (all their colors and all their children being affected), CSS3 also allows individual colors to be made translucent.

This is supported as numerical values are in two color schemes (RGB and HSL) with the addition of an alpha to both creating rgba [w3.org] and hsla [w3.org].

rgba(r,g,b,a)

Specifies a RGB color and an opacity (oft called alpha) as forth parameter. The values of r, g and b are either 0-255 decimal or 0%-100%. The opacity is expressed from 0-1 (fractions are allowed) where 0 is fully transparent and 1 is fully opaque. E.g.: rgba(170,187,204,0.5) or rgba(67%,73%,80%,0.5)

hsla(h,s,l,a)

Specifies an HSL color and an opacity (oft called alpha) as forth parameter. For the values of h,s and l see the hsl(h,s,l). The opacity is expressed from 0-1 (fractions are allowed) where 0 is fully transparent and 1 is fully opaque. E.g.: hsla(210,17%,75%, 0.5)

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>test</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      html {
        height: 100%;
        background-color: white;
        padding: 2em;
      }
      body {
        background-color: rgba(0,0,0,0.5);
        color: white;
        padding: 2em;
      }
      p {
        background-color: hsl(0,100%,50%);
      }
      h4 {
        background-color: hsla(0,100%,50%,0.5);
      }
    </style>
  </head>
  <body>
    <h4>hello world</h4>
    <p>hello world</p>
  </body>
</html>

Support:

Supported in most recent standards compliant browsers
Not supported by IE (including IE8)

Graceful fallback:

While is many cases one can calculate the colors oneself if the underlying elements are a solid color that under all of the element, it becomes much harder to do so when this isn't the case.

Sometimes opacity on the entire element might be an option, although it is far less flexible and introduces new stacking contexts which can be unwanted as well that it affects all of the element and it's children as well.

Practical use

This is what you need to get opacity into real use, unfortunately IE doesn't do it justice in any way.

CSS3 guide: 5.4. translucent colors

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week