CSS - Opaque text on low opacity div?

css opacity
Dan picture Dan · Mar 8, 2010 · Viewed 33.4k times · Source

I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.

Is there anyway to override this level and make the text appear black?

Any advice appreciated.

Thanks.

Answer

Quentin picture Quentin · Mar 8, 2010

Set the opacity on the background rather than the element.

background-color: rgba(255,0,0,0.6);

A while ago I wrote about how to achieve this in a backwards compatible way.

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