Allows IE6 to display transparent PNG background images

Core code CSS:

Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = Surl)

Attribute:
Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false
True: default value. Filter activation.
False: the filter is disabled.

Sizingmethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container.
Crop: Cut the image to fit the object size.
Image: default value. Increase or decrease the size boundary of an object to fit the image size.
Scale: scale the image to adapt to the size boundary of the object.

SRC: required. String ). Specify the background image using an absolute or relative URL. If this parameter is ignored, the filter will not work.

Known issues:
Filters overwrite the image on the text layer to invalidate hyperlinks and buttons. No options are set as the background.

The solution is not perfect:
Set the relative position of the DIV, link, or button to make it floating.

1. The text in this method will still show the blur effect in a translucent place.
2. The length changes such as Div, label, and gridview will not automatically adapt to the container length.

Several sections of code and methods:

Put the following code in the head area to solve the problem.
<! -- [If GTE ie 5.5000]> <SCRIPT type = "text/JavaScript" src = "JS/pngfix. js"> </SCRIPT> <! [Endif] -->
Function correctpng ()
{
For (VAR I = 0; I <document. Images. length; I ++)
{
VaR IMG = Document. Images [I]
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
I = I-1
}
}
}
Window. attachevent ("onLoad", correctpng );

Core functions of another official Solution
/*
Correctly handle PNG transparency in win IE 5.5 & amp; 6.
Copyright 2007 ignia, LLC
Based in part on code from http://homepage.ntlworld.com/bobosola.
 
Use in with defer keyword wrapped in conditional comments:
 
<SCRIPT type = "text/JavaScript" Defer = "true" src = "pngfix. js"> </SCRIPT>
 
*/
 
Function fixpng (){
VaR arversion = navigator. appversion. Split ("MSIE ")
VaR version = parsefloat (arversion [1])
 
If (version & gt ;= 5.5 & amp; version & lt; 7.0) & amp; (document. Body. filters )){
For (VAR I = 0; I <document. Images. length;> </document. Images. length;> var IMG = Document. Images [I];
VaR imgname = IMG. SRC. touppercase ();
If (imgname. indexof (". PNG") & gt; 0 ){
VaR width = IMG. width;
VaR Height = IMG. height;
VaR sizingmethod = (IMG. classname. tolowercase (). indexof ("scale") & gt; = 0 )? "Scale": "image ";
IMG. runtimestyle. filter = "progid: DXImageTransform. microsoft. alphaimageloader (src = '"+ IMG. SRC. replace ('% 23',' % 100 '). replace ("'", "% 27") + "', sizingmethod = '" + sizingmethod + "')";
IMG. src = "images/blance.gif" mce_src = "images/blance.gif ";
IMG. width = width;
IMG. Height = height;
}
}
}
}
 

Identify browser features
Firefox, opera, and other browsers that fully support PNG transparent images also support sub-selectors (>), while IE does not recognize (including IE7 ), we can use this to define the PNG Image styles in Firefox, opera, and other browsers. As follows:
HTML> body # PNG {Background: URL (images/bg.png) Repeat ;}
For IE, we all define it through the filter method. Someone may ask, isn't IE7 supporting PNG transparent images? Yes, good. IE7 supports PNG transparent images, but IE7 also supports alphaimageloader filters. To avoid the inconvenience caused by the conflict between PNG images and filters, we use alphaimageloader filters in IE. We can define filters in IE by only recognizing wildcards. As follows:
* Html # PNG {
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "images/bg.png ");
Background: none;
}
In this way, the absolute method is:
HTML> body # PNG {Background: URL (images/bg.png) Repeat ;}

Html # PNG {
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "images/bg.png ");
Background: none;
}

For more information, see
Http://dean.edwards.name/IE7/
Http://code.google.com/p/ie7-js/
Http://dean.edwards.name/weblog/2008/01/ie7-2/

All the Code principles are filters, and the background cannot be properly processed.