Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the transparent methods of PNG Alpha in IE6, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Many people say that IE6 does not support PNG transparency. In fact, IE supports 100% transparent PNG, while crazy IE6 just does not support png's Alpha transparency.

This BUG has brought us a lot of trouble.

But there are still many problems, such as translucent PNG background images.

The editor sorted out four ways to make PNG Alpha transparent in IE6:

The first method: AlphaImageLoader filter

Microsoft offers a solution: http://support.microsoft.com/kb/294714/zh-cn

Introduction: insert filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='scale') in each label style

Note:

It is difficult to insert a picture in AlphaImageLoader.

Transparent

The AlphaImageLoader method is used on the background image to achieve the effect of background-image.

AlphaImageLoader IE8 does not support

Because IE7 supports AlphaImageLoader, it is recommended to use CSS hack to avoid conflicts, and only for IE6

Test example: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

The second method: PNG Transparency in IE

Introduction: relatively simple, you can use a JavaScript with a filter to simulate the transparency of the picture or background PNG alpha

Note:

The spacer.gif transparent image in the root directory is used as a replacement for the png image, and the spacer.gif path written in JavaScript is adjusted as needed.

The PNGTransparncyinIE method can only achieve the effect of background-image in the background application, but the background repeated coordinate call can not be realized temporarily.

Official original: http://codingforums.com/archive/index.php?t-80555.html

Test example: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

The third method: IE PNG Fix v1.0 / 2.0 Alpha 3

This is a method highlighted in the latest version today.

Introduction: the page tag uses behavior:url ("iepngfix.htc"); to call the external iepngfix.htc file containing js and css to correct the PNG alpha transparency.

Test example 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html

Test example 2 (official, e-text): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

* support

element.

* supported background PNG images (unlike many other scripts! )

* support CSS1 background repetition and location (through optional plug-ins)

* background images can be defined by built-in or external stylesheets.

* automatic processing is changed to steel reinforced concrete / background via normal JavaScript (e.g. rollover)-there is no special coding need.

* change the factors that support changes in 'categories' including CSS.

* the use of automatic adaptation elements Papua New Guinea background factors.

* tiny scripts (quick download).

* the next free software license licensed.

How to use Follow these simple steps to add this to your page: follow these simple steps to add this to your web page:

1. Copy and paste iepngfix.htc and blank.gif into your website folder.

two。 Copy and paste into the CSS or HTML of your website:

Img, div {behavior: url (iepngfix.htc)}

The CSS selector must contain tags / content to be supported by Papua New Guinea-basically, give it a comma-separated list of tags to use. It must also include the correct path. The location of HTC relative to H TML file (not relative to CSS file! ). For example, you might look like this:

Img, div, a, input {behavior: url (/ css/resources/iepngfix.htc)}

3. If your site uses subfolders, open it. HTC files in text editors such as Windows notepad, and change the blankImg variable, including the correct path blank.gif like this:

IEPNGFix.blankImg ='/ images/blank.gif'

The same path is the relative HTML file. Otherwise, you will see a "broken image" figure!

4. If you want to support CSS1 background repetition and background location, be sure to include attachments. The js file is available to you:

Otherwise, the background picture can work, but will not repeat or stand.

5. You can sit down and enjoy it comfortably! Maybe consider donating to support the development of the script if you like what you see, because I spent hundreds of hours developing, testing and supporting it:). In addition, I will certainly thank a link to your website to mine!

Official original: http://www.twinhelix.com/css/iepngfix/

If you are interested in learning more or another way to activate scripts to maintain approved CSS compatibility, see the source code demo file.

How to solve common problems

1. I have posted it in CSS, but my pngs is not transparent!

It is important to remember that the path to a file is relative to the HTML file, not the CSS file (such as the CSS background image). If you want the path you want to test, insert: alert ('This workers'); enter. HTC files.

two。 Its project is offline rather than online.

For the first time, try to extract this preset demonstration and upload it to the Web server as it is. If it doesn't work, you may have a problem of type MIME. You must make sure that your server sends the correct MIME type "text / X component". HTC files. Try one of these two easy-to-fix programs:

3. Uploaded. The "htaccess" file, which downloads the script to the Web server, will make Apache emit the correct MIME type.

4. Instead of the so-called "IEPNGFIX.HTC" from your CSS, upload the IEPNGFIX.PHP in the same folder, and call no, this also sends out the correct MIME type.

5. My pngs is transparent, but has an interesting border or red "X" icon.

Check that the blankImg variable is set correctly. HTC file, once again the corresponding HTML file, loaded with PNGs.

The image is distorted, or this script rests on my page layout.

When applicable to the image without settings, the script will try with "guessing" the correct image size and applicable. If it gets something wrong, give you a clear image of width.

Link or form element A png,d element is not clickable.

Test example 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html

Test example 2 (official, e-text): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

The fourth method: IE PNG Fix v1.0 / 2.0 Alpha 3

Introduction: ie7/ie8-js is a JS library that solves the conflict between IE and W3C standards, making Microsoft IE behave like a Web standards-compliant browser and support more W3C standards.

Test example: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

After reading the above, do you have any further understanding of the PNG Alpha transparency method in IE6? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.