Although have let IE6 support PNG transparent background of JS program, is not very convenient, or with CSS to achieve good. Use is: ie5.5+ 's AlphaImageLoader filter.
1.png Background Transparent
Solution:
Copy Code code as follows:
#div1 {
height:600px;
width:260px;
padding:20px;
Background-repeat:repeat;
}
Html>body #div1 {
Background-repeat:repeat;background-image:url (bj1.png);
}
* #div1 {Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, Sizingmethod=scale, src= "Bj1.png") )
}
Additional: IE talent other wildcard character (*), to define the filter in IE browser
Browsers that fully support PNG transparent pictures, such as Firefox and opera, also support the sub selector (>)
Grammar:
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)
Property:
Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False
true: Default value. Filter activation.
False: Filters are prohibited.
Sizingmethod: Options available. String. Sets or retrieves how a picture of a filter's object is displayed within the bounds of the object container. Crop: Cut the picture to fit the object size.
Image: Default value. Increase or decrease the size boundaries of an object to fit the size of the picture.
Scale: Scales the picture to fit the object's dimension boundaries.
SRC: Required option. String. Specifies the background image using an absolute or relative URL address. If you omit this parameter, the filter will not function.
2.png Picture Transparent
If you insert a PNG picture directly in your Web page to make it transparent just add the following JS code, all the directly inserted PNG pictures within the entire page can be transparent:
Copy Code code as follows:
<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.cssText
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>