How to Set the Opacity of a DIV Background Using CSS

Some people call it the smoked or glass effect -- it's the ability to set the opacity or transparency of a background of an overlaying div using CSS. You might want to use this technique to ensure text is clearly legible when it overlays an image or even other text without blocking it completely.

While you could use opacity:0.5 to make it 50% transparent, this has the side effect of making everything in the DIV semi-transparent, not just the background. If this isn't your intention, save that one for another time.

A better solution is to use rgba() which controls not only the color but the alpha transparency as well. Unfortunately it doesn't work with some older browsers so it is a good idea to also include a fallback by solid background color.

The following code will create a fadded white background for you DIV:

.transparent {
  background:#7f7f7f;
  background:rgba(255,255,255,0.5);
}

Example:

If you want it to be dark, replace each of the 255's in the above example with zeros:

.transparent {
  background:#7f7f7f;
  background:rgba(0,0,0,0.5);
}

Example: