Reduce opacity of div's background without affecting contained element

http://css-tricks.com/rgba-browser-support/

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:

div {   background: rgba(200, 54, 54, 0.5); }

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had theopacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks)Cross-browser opacity is also a bit sloppy.

With RGBa, we can make a box transparent and leave its descendants alone:

Declaring a fallback color

Not all browsers support RGBa, so if the design permits, you should declare a "fallback" color. This color will be most likely be solid (fully opaque). Not declaring a fallback means no color will be applied in browsers that don't support it. This fallback does fail in some really old browsers.

div {   background: rgb(200, 54, 54); /* The Fallback */   background: rgba(200, 54, 54, 0.5); }

Do be aware of this bug though, related to not using shorthand in IE 6 and 7.

Browser Support for RGBa

Last updated: 05/14/2010

Browser, Version, PlatformOutcomeFallbackMozilla Firefox 3.x (and up)Works--Mozilla Firefox 2.x (and down)Doesn't WorkSolid ColorGoogle Chrome (any version)Works--WebKit - Safari 3.x (and up)Works--WebKit - Safari 2.x (and down)Doesn't Work--Mobile Safari (iPhone / iPod Touch / iPad)Works--Opera 10.x (and up)Works--Opera 9.x (and down)Doesn't WorkSolid ColorInternet Explorer 9 PreviewWorks--Internet Explorer 8 (down to 6)Doesn't WorkSolid ColorInternet Explorer 5.5 (and down)Doesn't WorkNo ColorNetscape (any version)Doesn't WorkSolid ColorBlackBerry Storm BrowserWorks--

Data gathered from this demo, which includes more complete browser compatibility list.

A better fallback for IE

Since IE supports conditional stylesheets, we can bust out those and a proprietary Microsoft CSS filter to accomplish the same result:

<!--[if IE]>      <style type="text/css">   .color-block {        background:transparent;       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);        zoom: 1;    }     </style><![endif]-->

UPDATE: As pointed out by a few folks, the alpha value should be the two digits at the start of the string not the end, so I've updated the code above to be correct. (e.g. startColorstr=#50990000 not startColorstr=#99000050)

ANOTHER UPDATE: We're past the point in time where you probably never need to use filter gradients again. But nonetheless, apparently the first two digits ("50" above) isn't 50%. You have to use "hexadecimal". As written to me by Julio Loayza:

rgba(255, 255, 255, 0.5) wouldn't be equivalent to (startColorstr=#50FFFFFF,endColorstr=#50FFFFFF)
rgba(255, 255, 255, 0.5) would be equivalent to (startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)

00 is transparent and FF opaque.

More Information

• Tim Kadlec: Not As Clear As It Seems: CSS3 Opacity and RGBA
• Andy Clarke: Is CSS3 RGBa Ready To Rock?
• Lea Verou: PHP library for creating PNG files with alpha transparency to be used as a fallback for RGBa.

Other Examples

Background image visible through dark content areasBorder of the facebox plugin uses RGBa bordersRGBa galore on 24 ways

Color Variations

Instead of having to remember or look up a bunch of different hex values for shades of gray, you can just use RGBa to adjust pure black to a shade that works e.g. rgba(0, 0, 0, 0.3); That is, assuming transparency is cool for whatever the application is (great for shadows, not great for text). Don't have to be black either obviously, you could make a whole monochromatic color scheme with any color this way.

Also, HSLa is a little easier to work with than RGBa if you need to be adjusting colors manually through code.