html - How to make a transparent background without background image?

Question

I would like a div to have a transparent background.
I tried to do this using background-color and opacity, but the problem is that the border and the text inside become also transparent. Example here.

Is this possible to achieve this without using transparent PNG background image ?

Answer 1

If you just want the color of the background to be transparent and not the child content, use

background-color: rgba(0,0,0,.5); // Sets to 50% transparent

See this page for more details - it's a css3 spec so won't show up in every browser:

http://www.css3.info/introduction-opacity-rgba/