countering a div opacity?

If I have a div that acts like a box, and I make it real sexy with 10% opacity.开发者_StackOverflow社区 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.

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)

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.

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