How to make the background DIV only transparent using CSS

Question

I am using CSS attrubutes :

filter: alpha(opacity=90);     

opacity: .9;

to make the DIV transparent, but when I add another DIV inside this DIV it makes it transparent also.

I want to make the outer(background) DIV only transparent. How ?

Answer 1

Fiddle: http://jsfiddle.net/uenrX/1/

The opacity property of the outer DIV cannot be undone by the inner DIV. If you want to achieve transparency, use rgba or hsla:

Outer div:

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/ 

Inner div:

background-color: #FFF; /* Background white, to override the background propery*/ 

EDIT
Because you've added filter:alpha(opacity=90) to your question, I assume that you also want a working solution for (older versions of) IE. This should work (-ms- prefix for the newest versions of IE):

/*Padded for readability, you can write the following at one line:*/ filter: progid:DXImageTransform.Microsoft.Gradient(     GradientType=1,     startColorStr="#E6FFFFFF",     endColorStr="#E6FFFFFF");  /*Similarly: */ filter: progid:DXImageTransform.Microsoft.Gradient(     GradientType=1,     startColorStr="#E6FFFFFF",     endColorStr="#E6FFFFFF"); 

I've used the Gradient filter, starting with the same start- and end-color, so that the background doesn't show a gradient, but a flat colour. The colour format is in the ARGB hex format. I've written a JavaScript snippet to convert relative opacity values to absolute alpha-hex values:

var opacity = .9; var A_ofARGB = Math.round(opacity * 255).toString(16); if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB; else if(!A_ofARGB.length) A_ofARGB = "00"; alert(A_ofARGB);