3 methods to make PNG images transparent in IE6

Source: Internet
Author: User
Tags transparent image

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)

 

<! 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>
<Style type = "text/css">
<! --
. Qq {
Height: 90px;
Width: 90px;
Background-image:Url(icon_home.png)! Important;/* FF IE7 */
Background-repeat: no-repeat;

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

<Body>

<Div class = "qq"> </div>

</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 !!!)

 

<! 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>
<Style type = "text/css">
. 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 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:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.