PNG images are transparent in other browsers and can have a perfect example of transparent background effect without any processing. However, ie6 cannot recognize the png Image transparency function in ie6, next I will introduce several methods for implementing the background transparency of ie6 png using js.
Example 1
Sometimes buttons cannot be saved as jpg because jpg is not transparent;
Sometimes the gradient cannot be saved as gif because gif has particles;
Therefore, we often use the png format, but IE6 is not compatible with the transparency or transparency of PNG images.
There are two scenarios: PNG Image background and plug-in PNG image.
It now provides a solution to the "plug-in PNG Image" transparency problem.
The solution is to insert a piece of JS in the page header.
I personally marked the "Recruitment voice chat room administrator page" and applied this method.
| The Code is as follows: |
Copy code |
<Script language = "JavaScript">
Function correctPNG () // correctly handle PNG transparency in Win IE 5.5 & 6.
{
Var arVersion = navigator. appVersion. split ("MSIE ")
Var version = parseFloat (arVersion [1])
If (version> = 5.5) & (document. body. filters ))
{
For (var j = 0; j <document. images. length; j ++)
{
Var img = document. images [j]
Var imgName = img. src. toUpperCase ()
If (imgName. substring (imgName. length-3, imgName. length) = "PNG ")
{
Var imgID = (img. id )? "Id = '" + img. id + "'":""
Var imgClass = (img. className )? "Class = '" + img. className + "'":""
Var imgTitle = (img. title )? "Title = '" + img. title + "'": "title = '" + img. alt + "'"
Var imgStyle = "display: inline-block;" + img.style.css Text
If (img. align = "left") imgStyle = "float: left;" + imgStyle
If (img. align = "right") imgStyle = "float: right;" + imgStyle
If (img. parentElement. href) imgStyle = "cursor: hand;" + imgStyle
Var strNewHTML = "<span" + imgID + imgClass + imgTitle
+ "Style =" "+" width: "+ img. width +" px; height: "+ img. height +" px; "+ imgStyle + ";"
+ "Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader"
+ "(Src = '" + img. src + "', sizingMethod = 'Scale');"> </span>"
Img. outerHTML = strNewHTML
J = J-1
}
}
}
}
Window. attachEvent ("onload", correctPNG );
</Script> |
Example 2
Simply add a JS file in HTML.
| The Code is as follows: |
Copy code |
Var bgsleight = function (){
Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
If (oldonload ){
Oldonload ();
}
Func ();
}
}
}
Function fnLoadPngs (){
Var rslt = navigator. appVersion. match (/MSIE (d +. d + )/,");
Var itsAllGood = (rslt! = Null & Number (rslt [1]) >=5.5 );
For (var I = document. all. length-1, obj = null; (obj = document. all [I]); I -){
If (itsAllGood & obj. currentStyle. backgroundImage. match (/. png/I )! = Null ){
FnFixPng (obj );
Obj. attachEvent ("onpropertychange", fnPropertyChanged );
}
}
} Function fnPropertyChanged (){
If (window. event. propertyName = "style. backgroundImage "){
Var el = window. event. srcElement;
If (! El. currentStyle. backgroundImage. match (/x.gif/I )){
Var bg = el. currentStyle. backgroundImage;
Var src = bg. substring (5, bg. length-2 );
El. filters. item (0). src = src;
El. style. backgroundImage = javasurl(x.gif )";
}
}
} Function fnFixPng (obj ){
Var bg = obj. currentStyle. backgroundImage;
Var src = bg. substring (5, bg. length-2 );
Obj. style. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + src + "', sizingMethod = 'Scale ')";
Obj. style. backgroundImage = javasurl(x.gif )";
}
Return {
Init: function (){
If (navigator. platform = "Win32" & navigator. appName = "Microsoft Internet Explorer" & window. attachEvent ){
AddLoadEvent (fnLoadPngs );
}
}
}
}(); Bgsleight. init (); |
