Png Summary of solutions that cannot be transparent under IE6, pngie6

Png Summary of solutions that cannot be transparent under IE6, pngie6

FF and IE7 support transparent png images directly.This mainly solves the gray background of transparent PNG images under IE6.

Copy codeThe Code is as follows:
Style = "FILTER: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = images/fl.png ')"

Syntax:
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = bEnabled, sizingMethod = sSize, src = sURL)

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.

Features:
Enabled: read/write. Boolean ). See enabled attributes.
SizingMethod: read/write. String ). See sizingMethod attributes.
Src: read/write. String ). See src attributes.

Note:
Within the boundary of the object container, an image is displayed between the background and content of the object. You can also cut and change the size of the image. If the file is loaded in PNG (Portable Network Graphics) format, the transparency between 0% and 100% is also provided.
The transparency of images in PNG (Portable Network Graphics) format does not affect your choice of text. That is to say, you can choose to display the content after the completely transparent area of images in PNG (Portable Network Graphics) format.

Example: Solve the Problem of transparent failure of png in 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 transparency and link failure solution </div>

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

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

Method 1: Define a style. After applying this style to a div, the transparent png background image of the div is automatically transparent. (The icon_home.png image and html file are 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 2: Define a style for img. All transparent png images on the page are automatically transparent. (This is only effective for directly inserted images, but not for background images. You need to create a small transparent image transparent.gif, which is not limited in size. Must be placed in the same directory as html
Do not use it in large quantities. Otherwise, the page will be opened slowly !!!)
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Method 3: Implemented Using JS. After a piece of js Code is added, all the inserted transparent png files are automatically transparent. (Note that this method is only valid for directly inserted images and invalid for background images)
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Method 4

<Script language = "javascript"> // fixed the problem that PNG images under IE cannot be transparently displayed. function fixPNG (myImage) {var arVersion = navigator. appVersion. 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.css Text; 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>
The usage is as follows:
Copy codeThe Code is as follows:



The above is all the content of this article. I hope you will like it.