How to make CSS opacity setting work in IE7 ?

[tefflox]

I have implemented a feature that works in firefox and opera, but doesn't work in IE -- it is the css opacity setting. I am overlaying translucent divs over a jpg image. Do I need to use javascript to fix this for IE ?

http://listenlight.net/05 is the page I'm working on.

Thanks. :-)

[MattEvans]

:| javascript won't do it i'm afraid, i've never tried an opacity setting in CSS, but if it's not in the official "standard" for CSS (and possibly even if it is) IE probably doesn't implement it.

you could try with medium alpha PNG files? that way, your image files contain the translucency (alpha) information in the pallete (or in each pixel). they could work in modern versions of IE...

if that doesn't work for you (I've never actually tried PNG translucency in browsers), you could always try good old fashioned screendoor transparency? XD
by that method, transparency is just "removing" pixels, the more pixels you remove, the more transparent a picture is ^_-

EDIT: Just a quick follow-up, translucent PNG files DO work (in Opera atleast).. To make a DIV background color transparent, use a small translucent PNG as the (tiled) background image. =)

EDIT (2): And just to follow that up again, translucent PNG's do NOT work in IE (version 6 atleast), maybe they work in IE7, I don't know. It might end up an IE-only screendoor job ^_-

[MattEvans]

And here's an EG,

http://www.fusiongroups.net/testbed/test.html

<div>
VERY OPAQUE<br/>
<div style="position:absolute;width:400px;height:200px;background-image:url('bg1.gif');"><br/>This text is infront of (on) the screen-door
<br/><br/>
This is the tile used as the divs background-image:
<br/>
<img style="width:80px;height:80px;background-color:white;" src="bg1.gif"/>
</div>
This text is behind the screen-door!
</div>

It looks ok at high (large) resolutions, at smaller resolutions it's clear that the image is dotted... On my somewhat blurry high-res screen though, you couldn't tell the difference between that and a translucent PNG ^_-

[Rhyan]

There is a complete article about opacity here:

http://www.quirksmode.org/css/opacity.html

In general, I have quickly browsed through the text and I think you will need the following
Explorer Windows

Explorer Windows requires:
filter: alpha(opacity=50);
Note that an element must have layout for a filter to work.

For further clarification you should go through the complete article.

[Alt_F4]

I believe that if you set the width and height of the element as well, IE7 will in fact render the opacity correctly

[Drew]

Most versions of IE do support Opacity but never correctly implemented it so it requires a few work arounds to work fully.

.myImage {
filter: Alpha(Opacity=80); //IE
opacity: 0.8;//other browsers that actually use standards
}

[chankya]

This may be an old thread, but it resolve my problem today. so thanks a lot guys for having this post. [:)]

[sahinci]

Hi gusy this opacity works for IE . But i have one problem just in IE ; when i use oppacity on ie , appear a black shadow backround back of image ! How can i fix thix problem ?