3 methods to make PNG images transparent in IE6

Last Update:2018-12-08 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 ＞

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

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

This effect is simple ,.... Pretty goodRecommendation

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.

Instance:Solve the Problem of transparent failure of png in IE6.

CSS style:

. Png {
_ Background: url (http://www.snowangel.cn/images/angel.png) no-repeat! Important;
Filter:
Progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = true,
SizingMethod = noscale, src = "http://www.snowangel.cn/images/angel.png ");
Background: none;
Width: 118px; height: 133px;
}

. Png div {position: relative ;}

HTML code:

<Div class = "png">
<Div>
Solve the Problem of PNG transparency and link failure in CSS background
</Div>
</Div>

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

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

1st Methods: define a style. After applying the style to a div, the transparent png of the divBackground ImageThe slice is automatically transparent. (The icon_home.png image and html file are in the same directory)

_ Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (Srcw.'icon_home.png');/* IE6 */
_ Background-image: none;/* IE6 */
}
-->
</Style>
</Head>

<Body>

</Body>
</Html>

2nd Methods: define a style for img. All transparent png images on the page are automatically transparent. (This method is only valid for directly inserted images,Invalid background image) Note: Prepare a small transparent image.Transparent.gif,Unlimited size. Must be placed in the same directory as html
Do not use it in large quantities. Otherwise, the page will be opened slowly !!!)

</Style>
</Head>

<Body>
Change to your png Image
<Div class = "mypng">

</Div>
</Body>
</Html>

3rd Methods: 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,Invalid background image)

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<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.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>
<Style type = "text/css">
<! --
Body {
Background-color: # 9999CC;
}
-->
</Style>

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

</Body>
</Html>

Method 4

<Script language = "javascript">
// 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:

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