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

Yes.

Set background-color: transparent;

and do not use opacity, as that is what makes semi-transparent the whole div..

updated your example at http://jsfiddle.net/eU7By/1/

UPDATE after comments

you can use rgba for the background-color as @DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

Answer 2

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/