PNG plus transparent opacity in jquery animations with black edges

This problem believes that many do JQ animation of children's shoes have been encountered. On the page to achieve some animation effect, with PNG24 pictures. Black edges are often present.

The fade effect of the jquery animation, used in PNG24 pictures, will appear in IE7, IE8 under the black border.

Some people find it strange, why, Pam? E6 Normal, but in IE7, 8 but there are black edge.

In fact, the problem is on the Filter property. IE6 refer to PNG24 pictures in the following ways:

The code is as follows	Copy Code
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' img24.png ');

So this black-side problem is avoided.

There are also some JS plug-ins on the internet to solve the black edge problem. But the effect is not ideal. After several tests, the final solution is as follows:

Set up a layer of div outside the picture using PNG24, for setting transparency. At the same time under IE PNG24 pictures do not use background to reference. And the way of using 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> </div>

Css

code is as follows	copy code
. Warp { Filter:alpha (OPACITY=20); } //This is a separate style for IE678, and other advanced browsers, such as Chrome, still use background to refer to . img24 { Background:none; Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' img24.png '); width:100px; height:100px; }