Png Summary of solutions that cannot be transparent under IE6

Last Update:2015-05-22 Source: Internet

Author: User

Tags transparent image

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Png Summary of solutions that cannot be transparent under IE6

Solving the problem of PNG Image transparency under IE6 many Google solutions are very common. When I used to do this kind of transparency, I used gif instead of png, so now I have not learned about this problem. Today, I will sort out this problem and summarize the solutions for you.

FF and IE7 have directly supported transparent png images. The following mainly addresses the gray background of transparent PNG images in IE6.

Copy the Code 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>

Solve the Problem of PNG transparency and link failure in CSS background

</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 the 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">

<Head>

<Title> untitled document </title>

<! --

. Qq {

Height: 90px;

Width: 90px;

Background-image: url(icon_home.png )! Important;/* FF IE7 */

Background-repeat: no-repeat;

_ Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'icon_home.png ');/* IE6 */

_ Background-image: none;/* IE6 */

}

-->

</Style>

</Head>

<Body>

</Body>

</Html>

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">

<Head>

<Title> untitled document </title>

. Mypng img {

Azimuth: expression (

This.png Set? This.png Set = true :( this. nodeName = "IMG" & this.src.toLowerCase().indexOf('.png ')>-1? (This. runtimeStyle. backgroundImage = "none ",

This. runtimeStyle. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + this. src + "', sizingMethod = 'image ')",

This. src = "transparent.gif") :( this. origBg = this. origBg? This. origBg: this. currentStyle. backgroundImage. toString (). replace ('url ("',''). replace ('")',''),

This. runtimeStyle. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + this. origBg + "', sizingMethod = 'crop ')",

This. runtimeStyle. backgroundImage = "none" available, this.png Set = true );

}

</Style>

</Head>

<Body>

Change to your png Image

</Div>

</Body>

</Html>

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 does not work for background images)

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> untitled document </title>

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>

<! --

Body {

}

-->

</Style>

<Body>

Replace the image with your own image

<! -- Replace an image with your own image -->

</Body>

</Html>

Method 4

// Fixed the issue 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:

The Code is as follows:

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More