CSS Instance Tutorial: The application of PNG background transparency in web design

Article Introduction: 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.

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.

first, 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 handle the PNG translucent under IE6, but this method also has limitations, can not use the background positioning, that is, can not use CSS Script

Method 1

CSS Core 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, but only need to be processed separately for IE6.
Method 2css core code:
_background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="weather.png",sizingMethod="crop");
Explain:
Method 1
When two identical properties appear in CSS, IE6 only recognizes the last one, regardless of whether there are! Important or not. (IE6 is recognized! Important, and the background image behind it acts as an interference. Under Firefox,! Important is executed first, and the filter does not work. In fact, we only need to deal with the problem that PNG does not support translucency in IE6. Other browsers support translucency of PNG, so we do not need to deal with it. This method also has limitations, that is, it does not support image location, that is, it does not support CSS script.
Method 2
The filter is also used for processing, but the method is different from method 1. It is used for IE6 processing alone, and "UU" is used for IE6 processing. Other browsers support the translucency of PNG, so there is no need to deal with it. It should be noted that "sizingmethod =" crop "must be written, otherwise there will be some inexplicable corner problems, which is also different from method 1 (sometimes it is normal not to write, but for the sake of safety, it is recommended to write).
second、DD_belatedPNG
DD "'belatedpng" perfectly solves the problems of "iepngfix. HTC" that can't be tiled, can't be located, and the hyperlink's click area can't be used!
See http://dillerdesign.com/experiment/dd'belatedpng/ for details. Translation is not provided here. Whoever has the time and energy to translate the document will do so. At the end of 2008, some people in China issued this method when it came out, but I don't know why it didn't cause any "effect". Many people are still using the "more limited" method mentioned above.
The use method is very simple. First download and call JS, and then reference the code in the page using PNG. Since it is processed for IE6, add the condition annotation of IE6 on the periphery to distinguish it from other browsers.
1.<!--[if IE 6]>
< script type = "text / JavaScript" SRC = "downloaded JS path" > < / script >
<script type="text/javascript">
Dd_belatedpng.fix ("CSS selector, application type");
</script>
<! [endif]-->
The reference function is DD "'belatedpng. Fix(), and the parentheses are filled with CSS selectors (ID selectors and class selectors can be used) and application types (IMG and background) that are transparent to the application PNG image. They support the use of multiple selectors. They support the event of hove. They are the same as CSS. The last two are the application types. Finally, the complete application code is as follows: (note that it must be input in full English. Many people always ask me why it doesn't work. In fact, it's because I input Chinese punctuation):
Single selector and single application type:
DD_belatedPNG.fix("#box-one,img")
DD_belatedPNG.fix(".header, background")
More selectors, more application types:
DD_belatedPNG.fix("#box-one, .header,#footer,.box-two a:hover, img,background");
In addition, in order to solve the problem of background image flickering under IE6, we can define the CSS of HTML
html {filter:expression(document.execCommand("BackgroundImageCache",false,true));}
Note: Please note that the punctuation of the above selector should be in English, otherwise it will not work!
DD "'belatedpng download (including compressed and uncompressed versions): Click to download
The effect comparison under IE6 is as follows:
CSS example tutorial: the application of PNG background transparency in Web Design-
I believe that there is a better way of compatibility. I hope you can share with me when there is a better way. Thank you for reading!