CODEWITHSUNDEEP
cssopacity
Dan
Dan

Reputation: 4140

CSS - Opaque text on low opacity div?

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.

Upvotes: 46

Views: 37485

Answers (5)

JohnTheTinkerer
JohnTheTinkerer

Reputation: 41

I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.

Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.

Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.

Upvotes: 4

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.

Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:

<div style="position: relative; background-image: url('your_image.jpg')">
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
    <div style="position: absolute">The text to go on top</div>
</div>

You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.

Upvotes: 0

CIDIC
CIDIC

Reputation: 59

this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Upvotes: 0

Johann Philipp Strathausen
Johann Philipp Strathausen

Reputation: 5726

The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.

In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.

Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.

Upvotes: 2

Quentin
Quentin

Reputation: 943562

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.

Upvotes: 75

Related Questions