CSS opacity property

Question

Hi, I use the CSS opacity property for the div tag, and it works well, but the problem is that when I write text or insert images in the div tag, they also disappear. I just need to bring the color back so as not to fade, not the contents of the div. My code ...

#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}

#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}

Thank!

Answer 1

It is much easier to use rgba()or transparent PNG for the background.

rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback

Answer 2

To do this, you can use the property rgba():

write like this:

#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}

For IE you can use IE filter

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);   /* IE6 & 7 */      zoom: 1;

You can create your filter here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 3

gif 1px x y. , .

Answer 4

, . , .

<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>

, , .

Answer 5

reset ?

#text in fade div
{
    font-weight:bold;
    color:#8A2BE2;
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

Answer 6

CSS3, , div div, , . .

div , -750px;, 1, div 0,1, ,

CSS3 :

#fade 
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}

0.1. 1.

What I personally do most often is to create a small .png with the transparent background that I want, and then I set this .png as the background of the element. In Photoshop, I could set the white background opacity to 0.1, and then keep the 50X50 square, and then I have almost perfect transparency (without IE6).

Answer 7

something like http://jsfiddle.net/PWM5f/ you need