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.