IE6 PNG transparent Ultimate Solution

ArticleDirectory

• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:
• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:
• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:
• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:
• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:
• Introduction:
• Ideas:
• Advantages and disadvantages:
• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:
• Introduction:
• Directory description:
• Ideas:
• Advantages:
• Disadvantages:
• Usage:

Today, when I sorted out my favorites, I found a previously-added transparent solution for ie6png. After taking some time to read it carefully, I decided to repost this article and share it with you, hope to help you. This article summarizes the eight solutions for ie6png transparency, and lists their advantages and disadvantages, which are worth adding to the favorites. Original article address:Http://www.w3cfuns.com/forum.php? MoD = viewthread & tid = 297.

Finally, I would like to thank kwooshung for writing such a good article.

 

"Cherish life and stay away from IE6", The bug in IE6 makes a lot of web front-end developers really have a headache, so I don't know how many brain cells are burned. The most annoying bug is that IE does not support PNG images, as a result, designers and reconfigurator gave up a lot of amazing effects. To reduce brain cells in this area, kwooshung gave up, sort out the most popular and practical solution for IE6 to support PNG images in this post for your reference!

Solution 1-filter solution: Introduction:

Filters have been officially introduced from ie4.0 by Microsoft, so we can use filters to solve the PNG transparency problem of IE6. Filters can not only achieve some of the current CSS 3 Rotation effects, but also introduce images.Note: This method is invalid in some ietest versions. We recommend that you use standard IE6 for testing!

Directory description:

Ideas:

1. Normal CSS writingCode, Import the image through the background, so that all browsers use this PNG image;

Background: URL (../images/w3cfunslogo.png );
 

2. Use a filter to introduce an image.Relative to HTML files, not CSS filesThe syntax is as follows:

 
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = "images/w3cfunslogo.png ");
 

The code is written here. We put it in IE6 for testing and found that IE6 is still not transparent, because although we have set a filter to introduce an image, the background also loads this image, the background layer is not displayed because it is higher than the filter settings, for example:

3. So we come to the conclusion that when we use filter, We need to invalidate the background, so we can useCsshack To solve this problem (if you do not knowCsshack For more information, seeHere!), You only needBackground: none;The Code is as follows:

 
_ Background: none;/*This code is only recognized by IE6*/
 

And because the filter only works in IE6, although the IE6 + version of the browser also recognizes the filter, PNG transparency is not a problem, so we can add IE6 hack to the filter.

4. Finally, we can get the following code:

# Pics{Background:URL (../images/w3cfunslogo.png) No-repeat;/*The following shows how to set PNG transparent code for IE6:*/_ Background:None;_ Filter:Progid: DXImageTransform. Microsoft. alphaimageloader (src = "images/w3cfunslogo.png ");}
 

Tip:If you need to make it support linked hovers, You need to define in CSS:Cursor: pointer;Make it show the hand shape, otherwise it will be the default mouse status.

Advantages:

1. Green without plug-ins;
2. High Efficiency and fast speed;
3. When the network speed is slow, there will be no gray first and then transparent, support remote images;
4. Supports hover and other pseudo classes, but two images must be used. When the network speed is slow, the second image cannot be displayed temporarily because it has not been fully loaded;

Disadvantages:

1. Tile is not supported. Although the filter has sizingmethod = "scale" and the scaling mode is stretched, the image will be deformed. If the color is simple or the gradient is simple, the image can be tiled horizontally;
2. The IMG tag is not supported;
3. CSS Sprite is not supported;

Usage:

1. When PNG is not introduced by IMG, consider it;
2. When there is no need for CSS Sprite, consider it;
3. When there is no tile demand, consider it;

Filter solution-demo entry

Solution 2-HTC plug-in solution: Introduction:

Internet Explorer (IE) supports the concept of web behavior since IE 5.5. These actions are described by a script file with the suffix ". HTC". They define a set of methods and attributes,ProgramYou can apply these methods and attributes to almost any element on the HTML page.

Directory description:

Ideas:

1. First download the compressed fileHtc.zip

2. copy and paste iepngfix.htcand blank.gif to your website folder.

3. The PNG label to be used is defined as follows,Location relative to the HTML file (not relative to the CSS file !). For example, you may look like this:

 
<StyleType= "Text/CSS">IMG, div{Behavior:URL (style/iepngfix. HTC);}</Style>
 

4. If your website uses subfolders, open them. In the HTC file, change the size of the blamkimgfile in the 16th line, and modify the path of the blamk.gif file as follows:The location of the same path relative to the HTML file (not relative to the CSS file !).

 
Iepngfix. blankimg = "images/blank.gif ";
 

Copy and paste iepngfix.htcand blance.gif to your website folder.

6. Because this JS is only useful when IE6 is used, we can modify the above Code to make our page more efficient, this Javascript is called only when IE6 is used:

 
<! --[If IE 6]> <SCRIPT type = "text/JavaScript" src = "../JS/iepngfix_tilebg.js"> </SCRIPT> <! [Endif]-->
 

Advantages:

1. Once configured, you only need to introduce PNG images as usual, and do not need to consider the problem of PNG relative to the HTML path. When the directory changes, you only need to modify the HTC file path in the HTC file or CSS.
2. Supports tile attributes.
3. The IMG tag is not supported;
4. Do not support hover and other pseudo classes;

Disadvantages:

1. JS, images, and HTC files are introduced;
2. CSS Sprite is not supported;
3. When the file is loaded, it will be temporarily dimmed;

Usage:

1. When PNG is not introduced by IMG, consider it;
2. When there is no need for CSS Sprite, consider it;
3. When the PNG image is frequently modified, consider it;

 

HTC solution-demo Portal

Solution 3-pure CSS solution:
Introduction:

Although it is a pure CSS solution, it also uses JavaScript For computation, but only writes the script to the CSS file. Unfortunately, this solution only supports IMG labels, invalid background image.

Directory description:

Ideas:

1. First download transparent image filesBlank.zip

2. Add the following code to the style to be transparent. The blue annotation code is the downloaded transparent image, and the path is alsoLocation relative to the HTML file (not relative to the CSS file !):

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 = "images/blank.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" success, this.png set = true);}
 

Advantages:

1. CSS code looks very elegant, at least there are no messy files, there are basically no additional files, the efficiency is not bad.

Disadvantages:

1. Add a batch of the existing blance.gif image files;
2. The background image is not supported;
3. When the file is loaded, it will be temporarily dimmed;
4. Do not support hover and other pseudo classes;

Usage:

1. Most transparent PNG files are included in the IMG label;
2. If you have a background image, refer to the two methods mentioned above that support the background image;

 

Pure CSS solution-demo entry

Solution 4-native JavaScript solution:
Introduction:

The filter principle of solution 1 is used for implementation. However, because this JavaScript does not read the style in the CSS file, this scheme also supports only the IMG tag, which is invalid for the background image.

Directory description:

Ideas:

1. First download the JS files used in this transparent solutionIepngfix.zip

2. Because this JS is only useful when IE6 is used, we can modify the above Code to make our page more efficient, this Javascript is called only when IE6 is used:

 
<! --[If IE 6]> <SCRIPT type = "text/JavaScript" src = "JS/iepngfix. js"> </SCRIPT> <! [Endif]-->
 

Advantages:

1. Code looks likeIt seemsVery elegant. There are basically no additional files, and the efficiency is not bad.

Disadvantages:

1. Added JS files and added HTTP requests;
2. The background image is not supported;
3. When the file is loaded, it will be temporarily dimmed;
4. Do not support hover and other pseudo classes;

Usage:

1. Most transparent PNG files are included in the IMG label;
2. If you have a background image, refer to the two methods mentioned above that support the background image;

 

Native JavaScript solution-demo entry

Solution 5-jquery solution:
Introduction:

Jquery brings us great convenience. jquery does not disappoint us a lot. Both IMG and PNG are supported at the same time. The only weakness in the United States is that they cannot be tiled and CSS sprite cannot be used.

Directory description:

Ideas:

1. First download the JS files and transparent GIF files used in this solution.Jquerypngfix.zip

2. Find the JS FileBlankgif: 'images/blank.gif'To change the pathLocation relative to the HTML file (not relative to the CSS or JS file !)

3. This JS is only useful when IE6 is used, so we can modify the above Code to make our page more efficient, this Javascript is called only when IE6 is used:

<! --[If IE 6]> <SCRIPT type = "text/JavaScript" src = "JS/pngfix. js"> </SCRIPT> <! [Endif]-->
 

Advantages:

1. CSS code looks very elegant, just introduce Js for simple configuration, the efficiency is not bad;
2. Supports background images and IMG;

Disadvantages:

1. Added JS files and image files, and added HTTP requests;
2. Loads a large jquery class library;
3. Problems may occur when multiple databases coexist;
4. Tile is not supported;
5. CSS Sprite is not supported;
6. When the file is loaded, it will be temporarily dimmed;
7. Do not support hover and other pseudo classes;

Usage:

1. When jquery is used in your project, consider it;

 

Jquery solution-demo entry

Solution 6-picture solution in png8 format:
Introduction:

Both png8 and GIF are 8-bit transparency. IE6 supports both the index color transparency of png8, but does not support PNG or more than 8-bit Alpha transparency. We recommend that you use png8 for non-animated GIF images, because the size will be smaller ~

Ideas:

One of the simplest and safest ways to make IE6 support PNG images transparent (a little bit)

Advantages and disadvantages:

Click here to go

Solution 7-dd_belatedpng solution:
Introduction:

We all know that the PNG Image transparency solution currently used is basically replaced by a filter, xpression, and transparent GIF. However, these methods do not support backgrond-position and background-repeat in CSS. This JS plug-in uses Microsoft's VML language for rendering and does not need to introduce other files, A small JS can perfectly solve the PNG Image bug. Even the IMG tag and hover pseudo class can be well solved.

Directory description:

Ideas:

1. First download the files used in this solutionDd_belatedpng.zip

2. Introduce the just-downloaded JS file. This JS is also useful only when IE6 is used. To make our page more efficient, we can modify the above Code as follows, this Javascript is called only when IE6 is used:

 
<! --[If IE 6]> <SCRIPT type = "text/JavaScript" src = "JS/dd_belatedpng.js"> </SCRIPT> <! [Endif]-->
 

3. Call a function and set the following parameters:

 
Dd_belatedpng.fix ("# pngimg, # pics, # picsrepeat ");
 

The input parameters are the ID, class style, and label name of the label of the PNG image to be used. You can also write them as follows:

 
Dd_belatedpng.fix ("# Content IMG ");
 

This rule indicates # All IMG labels in content are transparent.

If the link and link hover are set to transparent, you can write as follows. In some versions, you do not need to add the: hover to directly write the selector, but to ensure security, we recommend that you add: hover:

 
Dd_belatedpng.fix ("# links, # Link: hover ");
 

If you have used jquery or cssquery class libraries, you must be familiar with the above selection method. In short, how do you select the elements in CSS, in this case, you can separate the input content in this JS function (method) with commas.

Tips for kwooshung to use this method:If many PNG files exist on the page,Dd_belatedpng.fix ();Isn't the function parameter long? We can use this method:

 
Dd_belatedpng.fix (".pngfix,.png fix: hover ");
 

If we use the preceding method, we only need to add the corresponding tag to the HTML.Class = "pngfix"That's it. If there are multiple class styles, follow the regular Writing of multiple class styles.Class = "abc cbc pngfix",

When using this method, we need to load two JS files each time or write two <SCRIPT> labels. This is not good and the number of HTTP requests increases. Then we can open the dd_belatedpng.js file, add the following code at the end:

 
Window. onload = function () {dd_belatedpng.fix (".pngfix,.png fix: hover ");}
 

In this way, we only need to introduce this JS and add it to the tag that requires transparency.Class = "pngfix"It's easy, convenient, and fast!

Advantages:

1. CSS Code does not need to be modified. You can write it according to your usual ideas;
2. No configuration required;
3. No excess GIF images;
4. Supports IMG;
5. Supports tile;
6. Supports CSS Sprite;
7. Supports hover and other pseudo classes;

Disadvantages:

1. JS files (6.39 K) and HTTP requests are added, which are negligible;
2. When the file is loaded, it will be temporarily dimmed;
3. When there are too many JS files, errors may be reported, resulting in JS failure to run normally (this situation rarely occurs and can be ignored );

Usage:

1. If none of the current six methods can solve the problem, consider it;
2. When there are too many PNG images, you can consider this. Because there are too many PNG images, using the previous methods may lead to excessive CSS code redundancy. It is better to introduce this file;

 

Dd_belatedpng solution-demo Portal

Solution 8-evpng solution:
Introduction:

This solution is similar to the seventh solution, which is also used in the same way and has a very good effect.

Directory description:

Ideas:

1. First download the files used in this solutionEvpng.zip

2. Refer to the seventh method.

Advantages:

1. CSS Code does not need to be modified. You can write it according to your usual ideas;
2. No configuration required;
3. No excess GIF images;
4. Supports IMG;
5. Supports tile;
6. Supports CSS Sprite;
7. Supports hover and other pseudo classes;

Disadvantages:

1. Additional JS files (4.93 K file, smaller than K of dd_belatedpng) and HTTP requests are added;
2. When the file is loaded, it will be temporarily dimmed;
3. When there are too many JS files, errors may be reported, resulting in JS failure to run normally (this situation rarely occurs and can be ignored );
4. The hover effect using CSS sprite technology may have a one-pixel top deviation in some cases.

Usage:

1. If none of the current seven methods can solve the problem, consider it;
2. When the effect of dd_belatedpng is not satisfactory, consider it;

 

Original article:Http://www.w3cfuns.com/forum.php? MoD = viewthread & tid = 297.