CSS Opacity Property

Question

Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just ne

Answer 1

Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.

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

Align your markup carefully such that the markup resembles what you want.

Answer 2

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

Answer 3

Why don't you reset the opacity then?

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

Answer 4

You can use rgba() property for this:

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 generate your filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 5

Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set.

If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine.

With CSS3 you could do this:

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

and just the background would be 0.1 opacity. The text would still be 1.

What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).

Answer 6

It's much easier to use rgba() or a transparent PNG for the background.

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