PNG + transparent opacity black edges appear in Jquery Animation

Yesterday, I used png transparent images in jquery to make an animation. In ie8 and ie7 browsers, I found black borders, which are also very ugly, here are some tips for solving this problem.

I believe many children's shoes used for JQ animation have encountered this problem. To achieve some animation effects on the page, use PNG24 images. Black edges often appear.

The Fade-in and fade-out effect of JQuery animation is used on PNG24 images. A black border appears under IE7 and IE8.

Some people think it is strange. Why? Pan? E6 is normal, but there are black edges in IE7 and 8.

In fact, the problem lies in the filter attribute. IE6 uses the following method to reference A PNG24 image:

 

The Code is as follows:	Copy code
Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'img24.png ');

This black edge problem is avoided.

There are also some JS plug-ins on the Internet to solve the Black edge problem. However, the results are not satisfactory. After multiple tests, the final solution is as follows:

A DIV is nested outside the image that uses PNG24 to set transparency. In addition, PNG24 images under IE are not referenced using background. Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'img24.png.

Related code:
Html

The Code is as follows:	Copy code
<Div class = "warp"> <div class = "img24"> </div>

Css

The Code is as follows:	Copy code
. Warp { Filter: alpha (opacity = 20 ); } // Here is the style set for IE678 separately. Other advanced browsers such as chrome still use background reference. . Img24 { Background: none; Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'img24.png '); Width: 100px; Height: 100px; }