Opacity of background-color, but not the text

css opacity
Nir picture Nir · Mar 12, 2009 · Viewed 1M times · Source

How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a div while the text remains opaque?

I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I'd love to know so I can look at their code).

Answer

Austin Adams picture Austin Adams · Jan 17, 2011

Use rgba!

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Related questions

CSS Background Opacity

I am using something similar to the following code: <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> Text </div> </div> I expected this to make the background have an opacity of 0.4 and …

Read More
CSS opacity only to background color, not the text on it?

Can I assign the opacity property to the background property of a div only and not to the text on it? I've tried: background: #CCC; opacity: 0.6; but this doesn't change the opacity.

Read More
How do I give text or an image a transparent background using CSS?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the text and the background as two separate …

Read More