IE6 two solutions for PNG image opacity

IE is really a pain in the egg, although very do not want to use IE browser, but many times, the work has to be compatible with it. PNG translucent in IE6 is a very troublesome thing to be compatible with. The author collects and collates some of the following methods to handle PNG translucent in IE6. Please look down in detail.

One, CSS filters (two ways)

Generally can use CSS processing as far as possible not to use JS, the reason, you know ...
I have sorted out the use of filters to deal with IE6 PNG translucent, but the method also has limitations, can not use the background positioning, that is, can not use CSS Script, specific to see
Note: In this page please open in IE6 to get a contrast effect

PNG's background transparency is widely used in Web pages, but the compatibility of browsers has always been a headache, and the CSS filters can also be used to implement the compatibility of PNG background translucent, but it does not support the positioning of the background, which means that CSS SCRIPT is not supported.

The two image on the right is used for IE filter processing and no filter processing effect, there are two ways you can view the effect in IE6.

Method 1CSS Core Code:

The code is as follows	Copy Code
Background-image:url (weather.png)!important; Background-image:url (www.aqy106.com); Filter Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' weather.png ');

Other browsers do not need to be processed, only to be handled separately for IE6.

Method 2CSS Core Code:

The code is as follows	Copy Code
_background:none; _filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' weather.png ', sizingmethod= ' crop ');

Description

Method 1

When two of the same properties appear in the CSS, whether or not!IMPORTANT,IE6 only recognizes the last attribute. (IE6 is the identification of!important, the back of the Background-image play a role in interference.) Under Firefox,!important is given priority, and the filter filter does not work. This actually only needs to deal with PNG in the IE6 does not support the translucent problem, other browsers are supported PNG translucent, so do not need to deal with. The use of this method also has limitations, that is, does not support the positioning of the image, that is, does not support CSS Script.

Method 2

The same is done with the filter, but the method is different from the method, separately for IE6 processing, using "_" for IE6 processing, other browsers on PNG translucent is supported, so no longer need to deal with. It should be noted that sizingmethod= ' crop ' must be written, otherwise there will be some inexplicable corner of the problem, this is also a method with the method of a difference (sometimes not write will be normal, but for the sake of insurance, recommended to write).
, Dd_belatedpng

Dd_belatedpng Perfect solution of the "IEPNGFIX.HTC" will appear can not be tiled, unable to locate and the hyperlinks in the click area can not be used and so on!

See http://dillerdesign.com/experiment/DD_belatedPNG/for detailed documentation. There is no translation here, there is a lot of time to have the energy to a translation document it. At the end of 08 when this thing just came out of the domestic people have sent this method, but do not know why, did not cause any "effect", many people still use the above "more limited" method.

The use of the method is very simple, first download call JS, and then use PNG in the page to refer to the code, because it is for IE6 processing, so at the periphery plus the IE6 of the conditional annotation, in order to distinguish from other browsers. The complete code is as follows:

The code is as follows	Copy Code
<!--[if IE 6]> <script type= "Text/javascript" src= "JS path downloaded" ></script> <script type= "Text/javascript" > Dd_belatedpng.fix (' CSS selector, application type '); </script> <! [endif]-->

The reference function is Dd_belatedpng.fix (), filled in brackets with a transparent CSS selector (using the ID selector and class selector) and the application type (which is divided into IMG and background two) to support the use of multiple selectors, support Hove events, and CSS writing is the same, the last two is to write the type of application can be, and finally the complete application of the code below (note must be in full English state input, a lot of people always ask me what reason does not work, in fact, because of the input of Chinese punctuation):

Single selector and single application type:

The code is as follows	Copy Code
Dd_belatedpng.fix (' #box-one,img ') Dd_belatedpng.fix ('. Header, background ')

More selectors multiple application types:

The code is as follows	Copy Code
Dd_belatedpng.fix (' #box-one,. Header, #footer,. Box-two a:hover, Img,background ');

In addition, to solve the IE6 under the background image flashing, you can define the HTML CSS

The code is as follows	Copy Code
HTML {filter:expression (Document.execcommand ("Backgroundimagecache", False,true));}

Note: To pay attention to the above selector punctuation in the state of English, otherwise it is no effect! Specific use can see demo
Note: In this page please open in IE6 to get a contrast effect

The use of the method is very simple, first download call JS, and then use PNG in the page to refer to the code, because it is for IE6 processing, so at the periphery plus the IE6 of the conditional annotation, in order to distinguish from other browsers. The complete code is as follows:

The code is as follows	Copy Code
<!--[if GTE IE 6]> <script type= "Text/javascript" src= "JS path downloaded" ></script> <script type= "Text/javascript" > Dd_belatedpng.fix (' CSS selector, application type '); </script> <! [endif]-->

The reference function is Dd_belatedpng.fix (), filled in brackets with a transparent CSS selector (using the ID selector and class selector) and the application type (which is divided into IMG and background two) to support the use of multiple selectors, support Hove events, and CSS writing is the same, the last two is to write the type of application can be, and finally the complete application of the code below (note must be in full English state input, a lot of people always ask me what reason does not work, in fact, because of the input of Chinese punctuation):

The code is as follows	Copy Code
Dd_belatedpng.fix (' #nopng,. nopng,. Hover a:hover, IMG, background ');

: To pay attention to the above selector punctuation in the state of English, otherwise it is no effect!