Solve the Problem of PNG transparency failure under IE6-IE6 PNG transparency (four solutions) Sometimes it is necessary to use some transparent background images on the webpage, and use GIF images for less demanding effects. However, PNG images are more advantageous than GIF images for effects such as transparency, shadow, and glow. Currently, only Firefox, opera, and IE7 support PNG images, but ie6.0 does not support transparent PNG images, therefore, to make the PNG transparent background image correctly displayed in ie6.0, the filter can only be used in CSS. Next, we will describe how to solve the gray background of transparent PNG images in IE6 (recommended) ============== Select PNG 32 format for PNG images to maintain a perfect translucent, or the projection effect ============================== The ie css Filter contains a filter to make the PNG background transparent. The JavaScript method also applies this filter to achieve the PNG background transparent.
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = '../image/png_test.png ');
Usage example:
. PNG {Background: URL (../image/png_test.png );}
* Html. PNG {_ Background: none; filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = '../image/png_test.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 (path/angel.png) No-repeat! Important;
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = noscale, src = "path/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> ========================================================== ============================================ 1st Methods: 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">
<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;
Background-repeat: No-Repeat; _ Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'icon_home.png ');
_ Background-image: none;
}
-->
</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 and does not work for background images) Upload. Upload a small transparent image, with unlimited size. It 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_r (
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 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">
<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
</Body>
</Html> Method 4: This is just found on the Internet The biggest headache in web design is the display differences between different browsers. This is especially true for IE6. Recently, I encountered a very headache. The transparency of PNG in IE6 is invalid. After studying for almost three days, the problem was finally not solved perfectly. The W3C standard recommends that you use PNG images as the preferred image resource for Web pages. However, the beautiful, harmonious, and transparent PNG images are displayed in a mess under ie6. To solve this problem, I read a lot of materials. The core principle is to use the behaviro attribute in the CSS style unique to IE, and finally solve it using the following method: 1. Download The iepngfix.zip file, which contains three files: iepngfix.htc?iepngfix_tilebg.js?blance.gif. Decompress these files to the root directory of the website where PNG is used as the CSS background.
2. Assume that a div must use PNG as the background. The standard practice is as follows:
# Mydiv {
Background: URL (../img/main.png) No-Repeat;
Width: 739px;
Height: pixel PX;
Top: 12%;
Left: 20%;
Position: absolute;
}
At this time, the background can be normally displayed in ff and IE7, but there will be a terrible "gray edge" in IE6 ". Use a filter. The specific method is to use the HTC file mentioned above to define a behaviro attribute at the end of the CSS style. The new style is defined:
# Login_main {
Background: URL (../img/main.png) No-Repeat;
Width: 739px;
Height: pixel PX;
Top: 12%;
Left: 20%;
Position: absolute;
Behavior: URL ("iepngfix. HTC ");
}
The identifier in the URL is relative to index.htm, rather than the CSS file that defines the style. 3.introduce the second Javascript file mentioned above in the index.htm file, and use
<Script language = "JavaScript" src = "iepngfix_tilebg.js"> </SCRIPT>
Insert to
Finally, use ie6 index.htm to view the effect. By the way, for XP users who upgrade Internet Explorer 6 to Internet Explorer 7, these two browsers cannot coexist in the same operating system. I am stupid, sun's virtual box is installed with a win2k3. Fortunately, virtual box provides full screen and seamless mode, making the virtual machine quite smooth.
Optimization:
Solution 1: swap blank bitmap instead. We can imagine how large the computing scale is. No way, this is unavoidable. Vista and IE7 have come out for a long time, and there are excellent FF options. The share of customers who use IE6 will gradually decline. After reading this article, you can use ie7to open just index.htm and find that the pages that are perfect and don't need to be modified are loading very slowly in IE7. It seems that the behaviro attribute also affects IE7, making IE7 useless.
In this case, our goal is to release IE7 and check the hack of various browsers. We found that only IE6 can recognize the underscore "_" in CSS. therefore, we added an underline to behaviro In the CSS style. This underline is not parsed by FF or IE7, so that IE7 will ignore this CSS attribute and free IE7.
Solution 2: Since the goal of this processing is the IE6 browser, you can add a small change to the JS loading Statement on the homepage, and add "<! -- [If IE 6]> <! [Endif] --> "label, not only for IE6, but frees other browsers so that they ignore the iepngfix_tilebg.js file during page loading, improving efficiency. Poor IE6, let it accept the surging CPU consumption, no way, love can help. |
