(In IE6) png transparent Problem Analysis and Solution

 

In front-end web development, background or image transparency is often required.

First, we are currently facing the following situations:
1. In common browsers such as ie7 +, firefox, safari, and opera, it is no problem to directly use transparent png, but it cannot be transparent in ie6.

2. ie6's current regular share is still large. We must consider the compatibility with ie6.

Solution:
1. Use gif instead. all browsers can be transparent, but the effect is poor and there are edges. This can be used when the image pixels are relatively simple and the quality requirement is not very high.

2. png is used, but additional processing is required under ie.

3. You need to download microsoft's ie6 upgrade package, but you cannot require every user to upgrade it. Therefore, this method is not considered here.

Png Image transparency Solution

1. Upload a small transparent image transparent.gif.
2.
. Pngfix {
Azimuth: expression (
This.png Set? This.png Set = true :( this. nodeName = "IMG" & this.src.toLowerCase().indexOf('.png ')>-1? (This. runtimeStyle. backgroundImage = "none ",
This. runtimeStyle. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + this. src + "', sizingMethod = 'image ')",
This. src = "transparent.gif") :( this. origBg = this. origBg? This. origBg: this. currentStyle. backgroundImage. toString (). replace ('url ("',''). replace ('")',''),
This. runtimeStyle. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + this. origBg + "', sizingMethod = 'crop ')",
This. runtimeStyle. backgroundImage = "none" available, this.png Set = true );
}

Then add the style to the img label.

Png background transparency Solution
. Pngbackground {
Background: url(your.png );
_ Background: none;
_ Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'your.png ', sizingMethod = 'Scale ');
}

Note: When _ is added before the attribute, It is parsed only under ie6.

So far, we have basically solved the problem of png transparency under ie6, but it seems that things are not so smooth. Soon we can find that when png is used as a transparent background, in this case, all the events added above, such as onmouseover and onclick, are ineffective. This is also a feature of the filter, at this time, we need to set the position of this element to relative to solve the problem, that is:
. Pngbackground {
Position: relative;
Background: url(your.png );
_ Background: none;
_ Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'your.png ', sizingMethod = 'Scale ');
}