CSS - Opaque text on low opacity div?

Question

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 1

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.

Answer 2

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.