CODEWITHSUNDEEP
css
Jason94
Jason94

Reputation: 13608

countering a div opacity?

If I have a div that acts like a box, and I make it real sexy with 10% opacity. How do I counter it since everything in the div also gets the opacity. Lets say i have a box(div) with a 1px border and text, putting opacity on it will make it look bad and i only want opacity on the background.

Upvotes: 7

Views: 770

Answers (3)

meo
meo

Reputation: 31249

This is how you can apply opacity on background colors only, and not to the whole element and his children:

background: rgba(0,0,0, 0.5) //gives you a black background with 50% opacity

you can test it out here: http://jsfiddle.net/ypaTH/

there was a similar question here: How to give cross browser transparency to element's background only? (with IE version)

Upvotes: 12

e100
e100

Reputation: 1623

You could use a semi-transparent PNG image for the element's background. You'll need a fix such as Supersleight for IE6 support.

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

The contents of an element that have opacity inherit that opacity. You'll need to break it into two pieces: the background and the contents. Absolutely position the contents on top of the background. Your contents cannot be within the opacity element.

Upvotes: 6

Related Questions