Internet Explorer: Translucent Images

Question

I have two images below.

They are the same image, one of which has a slight glow effect on the text.

They are configured as follows:

<div id="header"><a></a></div> with the original image being the background for the div, and the glow image is the background for the anchor label with display:block; width: 100%; height: 100%;opacity: 0;

I am using the following jquery code

$('#header a').hover(
  function() {$(this).animate({"opacity":"1"}, 1000);},
  function() {$(this).animate({"opacity":"0"}, 1000);});

to display the snap image inside and out.

this works fine in firefox, chrome ect. But in Internet Explorer, the image gets a solid black background where there is transparency.

How can i fix this?

NB: My only concern is that 7/8 is not 6.

http://webspirited.com/header-reachsniper.png http://webspirited.com/header-reachsniper-hover.png

---

Refresh.
I decided it wasn’t worth my time in Internet Explorer.

However, this works fine in ie9, so I think it’s bad to remove this effect for browsers less than ie9.

Answer 1

To set the opacity of a transparent PNG image, you need to use a filter AlphaImageLoader, even in IE8.

EDIT : you also need to add a filter alphain CSS, for example:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);

Otherwise, jquery will clear the existing filter by adding a filter alpha.

Answer 2

Dave Shea mezzoblue.com : http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

, , , :

DD_belatedPNG, PNG VML AlphaImageLoader. IE6, IE7 . IE8 X-UA-Compatible IE8 IE7 .

. , , IE. , , .