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

Source: Internet
Author: User
Tags filter header implement version

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.

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 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, only to be handled separately for IE6.

Method 2CSS Core 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).

Second, 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.

1.

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:

    1. Dd_belatedpng.fix ("#box-one,img")
    2. Dd_belatedpng.fix (". Header, Background")

  More selectors multiple application types:

    1. 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

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!

Dd_belatedpng download (with compressed version and uncompressed version): Click to download

The effects of IE6 are compared as follows:

I believe that there is a better way of compatibility, I hope you have a better way to share with me, thank you for your reading!



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.