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 need div back color to be fade and not the div content. My code is ...

#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;
}

Thankyou !!!

Answer 1

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

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

Answer 2

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 3

Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.