The ultimate solution for IE6 PNG transparency (creating the strongest post of W3Cfuns-IE6PNG)_html/css_WEB-ITnose

Option 1 - Filter solution:

Introduction: Filters were officially introduced by Microsoft from IE4.0, so we can use filters to solve the PNG transparency of IE6 Question, filters can not only achieve some rotation effects of current CSS3 but also introduce images. Note: This method is not valid in some versions of IETest. It is recommended to use the standard IE6 for testing!


Directory description:

Idea:
1. Write normally CSS code, import images through background, so that all browsers use this PNG image;
background:url(../images/W3CfunsLogo.png);


2. Filter by Mirror imports images. When filters import images, they are relative to HTML files, not CSS files. The syntax is as follows:
                                                                                                                                                                                                                                                                        ;

The code is written here. After testing it under IE6, we found that IE6 is still not transparent, because although we set the filter to introduce the image, the background also loads this image, and because of the background layer It is higher than the filter setting, so it is not displayed, as shown below:

3. So The conclusion we came to is that when we use filter, we need to invalidate the background, so we can use CSSHack to solve this problem (if you don’t know how to use IE6’s CSSHack, please read here!), just change IE6 background:none;, then the code that can be obtained is as follows:
_background:none; /*This code is only recognized by IE6*/

And because the filter only works under IE6, Although the IE6 version of the browser also recognizes the filter, there is no gray background problem with transparent png, so we can also add the filter to the IE6 Hack.


4. Finally we can get the following code: .png) no-repeat;

/*The following is the IE6 setting PNG transparent code*/
_background: none;
_Filter: progid: dximagetransoft.alphamageloader (SRC = "Images/W3CFUNS Logo.png ");
}


Tip: If you need to support linked hover, you need to define: cursor:pointer; in CSS to make it appear a hand shape, otherwise it will be the default mouse state.


Advantages:
1. Green without plug-ins;
2. High efficiency and fast speed;
3. When the network speed is slow, there will be no gray background and then transparency. In this case, remote pictures are supported;
4. Support pseudo-classes such as Hover, but two pictures must be used. If the network speed is slow, the second picture will not be displayed temporarily because it has not been fully loaded;


Disadvantages:
1. Tiling is not supported. Although the filter has sizingMethod="scale", stretching and scaling mode, the picture will be deformed. If it is a pure color or a simple gradient color, it will still work. Horizontal tiling;
2. Does not support Img tag;
3. Does not support CSS Sprite;


Usage:
1. Can be considered when there is no img to introduce png;
2. Can be considered when there is no need for CSS Sprite;
3. Can be considered when there is no need for tiling;



Filter solution - DEMO entrance

Option 2 - HTC plug-in solution:

Introduction: Starting from IE version 5.5, Internet Explorer (IE) begins to support the concept of Web behavior. These behaviors are described by script files with the suffix .htc, which define a set of methods and attributes that programmers can apply to almost any element on the HTML page.


Directory description:

Idea:
1. First download the zip File htc.zip (2.27 KB, Downloads: 2851)
2. Copy and paste iepngfix.htc and blank.gif into your website folder.
3. Define the PNG tag to be used as follows, relative to the position of the HTML file (not relative to the CSS file!). For example, you might look like this:
                                  t ;

5. If your website uses subfolders, open them. HTC file, change the blankImg variable around line 16, and modify the blank.gif path like this: The same path is relative to the location of the HTML file (not relative to the CSS file!).
IEPNGFix.blankImg = "images/blank.gif";

6. Copy and paste iepngfix.htc and blank.gif into your website folder.
& lt; script type = "text/javascript" src = "js/IEPNGFIX_TileBg.js" & gt; & lt;/script & gt;

7. Because JS is only useful when using IE6, it is used to make To make our page more efficient, we can modify the above code as follows. This JavaScript will only be called when running IE6:



Advantages:
1. One-time configuration , you only need to introduce png images as usual, and there is no need to consider the path of png relative to html. When the directory changes, you only need to modify the htc file or the htc file path in css.
2. Support tile attributes.
3. Does not support Img tag;
4. Does not support pseudo-classes such as Hover;


Disadvantages:
1. More js, pictures and htc are introduced, a total of three File;
2. CSS Sprite is not supported;
3. Before the file is loaded, a gray background will be temporarily displayed;


Usage:
1. When there is no img It can be considered when introducing png;
2. It can be considered when there is no need for CSS Sprite;
3. It can be considered when PNG images are modified frequently;


htc solution - DEMO entrance

Option 3 - Pure CSS solution:

Introduction: Although it is a pure CSS solution, it also uses JavaScript for operation. , it just writes the script into the CSS file. Unfortunately, this solution only supports the img tag and is invalid for background images.


Directory description:

Ideas:
1. First download the transparent image file blank.zip (707 Bytes, download times: 1923)
2. Set transparency when needed Add the following code to the style. The blue marked code is the transparent image just downloaded. The path is also relative to the position of the HTML file (not relative to the CSS file!):
img
_azimuth: expression(this.pngSet?this.pngSet=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")),this.pngSet=true);
}


Advantages:
The CSS code seems to be very elegant, at least there are no messy files, there are basically no additional files, and the efficiency is pretty good.


Disadvantages:
1. An extra blank.gif image file is introduced that should not exist;
2. Background image is not supported;
3. When the file Before loading, a gray background will be temporarily displayed;
4. Hover and other pseudo-classes are not supported;


Usage:
1. Most transparent pngs exist in the img tag You can consider it;
2. If you have a background image, you can refer to the two ways to support background images mentioned above;


Pure CSS solution - DEMO entrance

Option 4 - Native JavaScript solution:

Introduction: Use the filter principle of option 1 to implement, but because this javascript does not read the css The style in the file, so this solution also only supports img tags and is invalid for background images.


Directory description:

Idea:
1. First download transparent The js file used in this solution iepngfix.zip (1.25 KB, download times: 2810)
2. Since this js is only useful when using IE6, in order to make our page execute more efficiently, we The above code can be modified as follows. This JavaScript will only be called and executed in IE6:



Advantages:
The code seems to be very elegant, there are basically no additional files, and the efficiency is pretty good.


Disadvantages:
1. Additional js files are added to increase http requests;
2. Background images are not supported;
3. Before the file is loaded, it will Temporarily present a gray background first;
4. Hover and other pseudo-classes are not supported;


Usage:
1. It can be considered when most transparent pngs exist in img tags;
2. If you have a background image, you can refer to the two ways to support background images mentioned above;


Native JavaScript solution - DEMO entrance

Option 5 - jQuery solution:

Introduction: jQuery has brought us great convenience, jQuery has not let us down much, both img and png It is supported at the same time, but the only drawback is that it cannot be tiled and CSS Sprite cannot be used.


Directory description:

Ideas:
1. First download the js files and transparent gif used in this solution jQueryPngFix.zip (2.7 KB, download times: 3697)
2. Find blankgif: 'images/blank.gif' in the js file, and change the path to the location relative to the HTML file (not relative to the CSS or js file!)
3. Since this js can only be used when using IE6 Useful, so in order to make our page execute more efficiently, we can modify the above code as follows. This JavaScript will only be called and executed in IE6:
 


Advantages:
1. CSS code It looks very elegant. You only need to introduce js for simple configuration. The efficiency is pretty good;
2. Supports background images and img;


Disadvantages:
1. Additional js files and image files have been added, and http requests have been added;
2. A huge jQuery class library has been loaded;
3. Problems may occur when multiple libraries coexist;
4. Platform is not supported Shop;
5. Does not support CSS Sprite;
6. Before the file is loaded, a gray background will be temporarily displayed;
7. Hover and other pseudo-classes are not supported;


Usage:
You can consider it when using jQuery in your project;


jQuery solution - DEMO entrance

Option 6 - Image solution in PNG8 format:

Introduction: Both png8 and gif have 8-bit transparency. IE6 inherently supports the indexed color transparency of png8, but does not support png. Or 8+ bit alpha transparency. For non-animated GIFs, it is recommended that you use PNG8, because the size will be smaller~

Idea: The simplest and safest way to make IE6 support transparent PNG images (a little sharing)

Pros and Cons: Click here to go to

Option 7 - DD_belatedPNG Solution:

Introduction: We all know that at present The png image transparency solutions used are basically solved by using filters, xpression, and transparent gif replacement. However, these methods have a disadvantage, that is, they do not support background-position and background-repeat in CSS. This time the js plug-in uses Microsoft's VML language for drawing and does not require the introduction of other files. A small js can perfectly solve the png image bug. Even the img tag and hover pseudo-class can also be solved very well.


Directory description:

Ideas:
1. First download the files used in this solution, DD_belatedPNG.zip (3.76 KB, download times: 4610)
2. Introduction The js file you just downloaded, also because this js is only useful when using IE6, so in order to make our page execute more efficiently, we can modify the above code as follows, this JavaScript will only be called and executed when IE6:
;!--[if IE 6]>
3. Call the function and set the parameters as follows:
DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");

The parameters passed in are the ID and class of the tag of the png image used. Style and tag names can also be written as follows
DD_belatedPNG.fix("#content img");
This method means that all img tags under #content are transparent

If Links and link hover settings are transparent, then you write as follows. In some versions, you can write the selector directly without adding :hover, but for insurance, it is recommended that we add :hover:
DD_belatedPNG.fix ("#links,#link:hover");

Having written this and you have used jQuery or CSSQuery class library, you must be familiar with the above selection method. In short, in CSS you are How to select elements, then what to pass in this js function (method), but when selecting multiple selections, just use commas to separate them.


KwooShung’s tip when using this method: If there are many pngs in the page, wouldn’t the parameters of the DD_belatedPNG.fix(); function be very long? We can use this writing method:
DD_belatedPNG.fix(".pngFix,.pngFix:hover");

If we use the above writing method, we only need to add it to the corresponding tag in our html Just class="pngFix" will do. If there are multiple class styles, just follow the usual way of writing multiple class styles: class="abc cbc pngFix",

When using this method, we always It is necessary to load two js files or write two <script> tags. This is not good and the number of http requests will increase. Then we can open the DD_belatedPNG.js file and add the following code at the end: <br /> window. onload = function()<br />                                                                                      So we only need to introduce this JS, when transparent tags are needed Just add class="pngFix" to it, it's simple, convenient and fast! <br /><br /><br />Advantages: <br /> 1. The CSS code does not need any modification, just write it according to your usual ideas; <br /> 2. No configuration is required; <br /> 3. There are no redundant gif images; <br /> 4. Support img; <br /> 5. Support tiling; <br /> 6. Support CSS Sprite; <br /> 8. Support pseudo-classes such as Hover; > 1. Additional js files (6.39k) and http requests are added, which can be ignored; <br /> 2. Before the file is loaded, a gray background will be temporarily displayed; <br /> 3. When there are too many js files, An error may be reported, causing js to fail to run normally (this situation rarely occurs and can be ignored); <br /><br /><br />Usage: <br /> 1. When the current 6 methods cannot solve the problem, you can Consider; <br /> 2. You can consider it when there are too many png images. Because there are too many png images, using the previous methods may lead to too much redundant CSS code. It is better to introduce this file; <br /><br /><br />DD_belatedPNG solution - DEMO entrance <br /><br /><br /><br /></script>

Solution 8 - EvPng solution:

Introduction: This solution is similar to the seventh solution , the usage method is exactly the same, and the effect is also very good.

Directory description:

Idea:
1. First download the files used in this solution. EvPng.zip (3.39 KB, number of downloads: 2843)
2. Refer to the usage method of the seventh option.


Advantages:
1. The CSS code does not need any modification, just write it according to your usual ideas;
2. No configuration is required;
3. There are no redundant gif images;
4. Support img;
5. Support tiling;
6. Support CSS Sprite;
8. Support pseudo-classes such as Hover; > 1. Additional js files (file 4.93k, smaller than DD_belatedPNG’s 6.39k) and http requests are added, which can be ignored;
2. Before the file is loaded, a gray background will be temporarily displayed;
3. When there are too many js files, an error may be reported, causing js to fail to run normally (this situation rarely occurs and can be ignored);
4. The hover effect using CSS Sprite technology may be top in some cases. There is a 1 pixel deviation.


Usage:
1. You can consider it when the current 7 methods cannot solve the problem;
2. You can consider it when the effect of DD_belatedPNG is not ideal;


Solution provider: This post is on the 60th floor. Thank you moxuanyuan children’s shoes for sharing.


EvPng Solution - DEMO Entry