PNG is not transparent in IE6 solution Rollup _javascript Tips

FF and IE7 have directly supported the transparent PNG map, and the next one is mainly to solve the IE6 transparent PNG picture with a gray bottom

Copy Code code as follows:

Style= "FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=images/fl.png ')"

Grammar:
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)

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.

Characteristics:
Enabled: can read and write. A Boolean value (Boolean). See the Enabled property.
Sizingmethod: can read and write. String. See Sizingmethod properties.
SRC: can read and write. String. See SRC attribute.

Description
Within the bounds of the object container, display a picture between the object's background and content. and provides an operation to cut and resize the picture. If the PNG (Portable Network Graphics) format is loaded, the transparency of 0%-100% is also provided.
The transparency of the pictures in PNG (Portable network Graphics) format does not prevent you from selecting text. That is, you can choose to display the contents behind the fully transparent area of the picture in PNG (Portable Network Graphics) format.

Example: Resolves the problem of PNG transparency invalidation under IE6.

CSS style:

. png{
_background:url (images/angel.png) no-repeat!important; 
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=true, Sizingmethod=noscale, src= "images/ Angel.png ");
Background:none;
Width:118px;height:133px
}

. PNG div{position:relative;}

HTML code:

<div class= "png" >
<div>
CSS background png transparent and link expiration Problem resolution
</div>
</div>

/*
Compatible with IE6.0, IE7.0, FF,
IE7.0 and the new version of FF can be directly transparent without the filter filter.
*/

=============================================================================

method One : Define a style, and after applying this style to a div, the transparent PNG background image of the div is automatically transparent. (Note that the path of the two pictures is not the same, in this case, the Icon_home.png picture and the HTML file in the same directory)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 
 

method Two : Define the Style for IMG, and all transparent PNG on the page is automatically transparent. (This method is only valid for directly inserted pictures, invalid for background image) Note that to prepare a small transparent picture transparent.gif, size unlimited. Must be placed in the same directory as HTML
Do not use it heavily, or it will cause the page to open slowly!!!)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

method Three : With JS implementation, plus a section of JS code, all inserted transparent PNG automatically transparent. (Note that this method is only valid for directly inserted pictures, not for background images)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

method Four

<script language= "JavaScript" >//fix problems with PNG images that cannot be transparently displayed by IE fixpng (myimage) {var arversion = NAVIGATOR.APPV
Ersion.split ("MSIE");
var version = parsefloat (arversion[1]); if (version >= 5.5) && (version < 7) && (document.body.filters)) {var imgid = (myimage.id)?
   "Id= '" + myimage.id + "'": ""; var imgclass = (myimage.classname)?
   "Class= '" + myimage.classname + "'": ""; var imgtitle = (myimage.title)?
   "Title= '" + myimage.title + "'": "title= '" + Myimage.alt + "'";
   var imgstyle = "Display:inline-block;" + MyImage.style.cssText; var strnewhtml = "<span" + imgid + imgclass + imgtitle + "style=\" "+" width: "+ myimage.width +" PX;

  Height: "+ myimage.height +" px; "+ Imgstyle +"; + "Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\ '" + myimage.src + "\", sizingmethod= ' scale '); \
   "></span>";
myimage.outerhtml = strnewhtml; }} window.onload=function () {document.getelementbyiD ("Top"). style.height=screen.height/5+ "px";

 }//</script>

Usage is as follows:

Copy Code code as follows:

The above mentioned is the entire content of this article, I hope you can enjoy.