Resolve IE6 background picture with gray background turn

foreword : IE6 does not support PNG background transparency or translucency. The solution has IE filters, pure JavaScript, and jquery, and so on, so-called things are not difficult to understand, so that the PNG picture under the IE6 background transparent display is only the first step, if the PNG images to do further operation, often will appear all kinds of inexplicable problems. And this article explains in detail what the PNG background transparency will appear, some of their own experience and some related development. More content, there is a certain depth and breadth, I hope to help you.

One, a solution to the method

1. IE CSS Filter
The IE CSS filter has a filter that makes the PNG background transparent, and the JavaScript method is also applied to make the PNG background transparent.
notation: Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '). /image/png_test.png ');
Usage examples:
. Png{background:url (.. /image/png_test.png);}
* HTML. png {Background:none; Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '). /image/png_test.png ');}
Non-IE6 browsers use normal background positioning, IE6 remove background image, apply PNG transparent filter.
If your browser or kernel is IE6, it is strongly recommended to click here to enter the demo instance page .

2. Traditional JavaScript
Using the traditional JavaScript method, the page can only be linked to a small JavaScript file. For example, you can add the following code to the page:

<script src= "http://www.zhangxinxu.com/study/js/png.js" type= "Text/javascript" ></script >

This JavaScript file is the JavaScript file that I used to make the PNG background transparent, it can make all the PNG images with transparent background transparent display, support background-image png picture transparent, However, background-position positioning is not supported, and PNG images of the input box of type image are not supported in the transparency.

If you are IE6 or the kernel is a IE6 browser, it is highly recommended to click here to view the demo instance page
On this page, you can clearly see the scope and limitations of this JavaScript application.

3.jQuery PNG background Transparent plugin
With respect to the previous approach, the PNG transparent plugin for jquery IE6 is relatively strong.
This plugin js download:jquery.pngFix.pack.js
You should also link the jquery file when you use it.
The power of this JS is not only support IE6 under the IMG tag PNG background transparent, background-image background transparent, also support the image type of input PNG background transparent that, and achieve the precise control, That is, you can make any PNG picture on the page transparent to the background and not be affected.

No matter what browser you are, it is highly recommended that you click here to access the exciting Demo instance page.
You can feel the power of this PNG background transparent plugin on this page.

4. Loading PNG images with flash
The principle of using Flash to mount PNG is: Flash to PNG transparent background support is very good, as long as the user installs the Flash plugin, the background of the PNG image displayed by flash must be transparent.
There are two methods of implementation, a suitable for flash is not very familiar, is directly embedded in Flash, the method is as follows: Open Flash software, set stage size, drag the PNG picture onto the stage (or into the stage), export flash-> The SWF is inserted in the page and finished, but this method is not easy to maintain, if you want to change the picture, but also to move the flash source files. Another is to interact with the page, from the page to get the picture path, one of the simplest way is to pass the Flashvars, and then in Flash write a very short code on it.

If you are interested, it is recommended that you click here to go to the Demo instance page to visit.
The page shows the ActionScript code of the Flash get page parameters, ActionScript 3.0 code, need at least flash CS3 version of the Flash software, directly written on the first frame on it, and set the stage size as large as the picture.

Ii. Problems arising

1. Unable to respond to click events
This problem exists in each solution (even if the flash encapsulates a PNG method, which itself does not respond to the Click event, only the background is transparent in response to the onmousedown event), not that it cannot respond to the clicked event itself, but that its inner label is unresponsive. To give a simple example, a div tag, there is a tag, a tag has a link to or have a JS response event, and this div tag has a png transparent background picture, and in the IE6 under the transparent processing, then this a tag is deaf ears-furnishings, can only see can not be used. Say more unfavorable, see for Real, if your browser is IE6 or kernel for IE6 please click here , to feel what I said click Not responding is how a non-response method bar. If you are using Firefox,chrome or Opera,safari now, but you have a damned IE6 browser, it is recommended that you compromise, also come in to see.

2. Limited picture size control
This problem is encountered in the CSS PNG transparent filter and the old-fashioned JavaScript method. The question is summarized as follows: Cough, an img tag's src path points to a PNG image with a transparent background or translucent (for example: ), and under IE6, this image is subject to CSS filters or old-fashioned JavaScript PNG transparent processing, then any size limit on the image stretch is blind lighting-a candle. To be specific, let's say that we have here the Xx.png original size of 128 pixels *128 pixels, you use css,img{width:256px; height:256px;} or direct to stretch him to 256 pixels *256 pixels, you'll find that there's a more difficult way to go than the Shu road--This picture is still in its original size, but the space occupied has changed.

for the Demo instance page small, if you are IE6 browser, you can click here to see a clear look.

3. Unable to position the background image background-position
There is a noun called css sprite. Seems to be a lot of background pictures to focus on a large map, through the background-position positioning, which pictures to show that part of the area, this benefit greatly, use popular very ah, optimize the size, reduce the server pressure, a lot of benefits, inside quite learned, but not the focus of this article, not tricky. This CSS sprite background positioning skill in the web2.0 is a breeze, a duck to the ground, but encountered IE6 browser, sometimes he can only cry. If the background image is a PNG image with a transparent background, and the background transparent display processing is applied, the background image is completely immune to background-position. IE6. Any of the above demo instance page, save, to these background-image for PNG picture and add a background-position try (such as background-position:-100px-100px; You will find no use. If you don't want trouble, just click here to see it. PS: if IE6 browser, otherwise no effect of Oh!

Third, the solution of the problem response

1. Unable to respond to click events
To resolve an issue where the internal label cannot respond to a click event, the key is to take the internal label externally, use another method to cover the location, or not to use another transparent layer or transparent image to locate and overlay. The most critical one word: coverage; The most difficult point: positioning. When it comes to the positioning of covering properties, there are two types, one is relative or absolute position, and the other is the negative position of margin. Due to IE6, the parent tag is position:relative, or Position:absolute attribute, the inside of the absolute positioning layer sometimes disappear, so I prefer the margin negative position and position:relative negative position. The last column of the demo instance page of this question gives a workaround, margin negative location resolved. Many methods, but also very free, is to cover, positioning. You are interested to try clicking here to see how to navigate, if resolving this click does not respond to the problem.

2. Limited picture size control
The solution to this problem, say you don't laugh at me, is to use the powerful jquery PNG transparent plug-in bar. This plugin not only allows the specified PNG to be transparent, but also supports the PNG image background transparency of the image type input, and more importantly, it supports any stretch of the PNG image.
If you are a IE6 browser, it is recommended that you mercilessly click here to see the picture wonderful stretching control, if you are not currently using IE6 browser, but there is, also suggest you go to see.

3. Unable to position the background image background-position
The background image can not be background-position positioning, then get the page to be positioned on the good. Using the img tag, src link This large background image, or with a span tag, its height is wide is the entire background map of the high-wide, background image is a large background map, on the page to the IMG or span tags such as positioning, you can achieve the effect you want to achieve through background-position.
Two major methods, margin positioning and position positioning.

There needs to be a narrative.
First, if you are directly using CSS filters or traditional PNG transparent JavaScript, the positioning is purely margin positioning or absolute positioning. The concept here is rather vague, the example illustrates it. For example, we'll use the PNG button image below as an example of the footage to illustrate.

A. If you are using a CSS PNG transparent filter, you need to write this PNG picture in the background, otherwise the filter will not work. The wording is as follows: (note: Background-image here is to be written in CSS, This is meant to be used for illustrative purposes only) and all you have to do is margin or absolute the img tag.

For example, I write this way, <div style= "width:160px; height:40px; Overflow:hidden; " ></div> The result is the" home "button the mouse passed the state. The position of the picture is controlled by margin, and because the parent tag aspect is set and overflow hidden, it is possible to achieve the effect similar to the Background-position control by positioning the image. Absolute absolute positioning and margin positioning is actually the same, are positioning, the application of CSS properties are different.

B. If you're using traditional JavaScript to make PNG transparent, then you'll be free to use the notation. Writing is also possible, its positioning and the above is the same, directly through the set class with CSS control can, generally do not appear inexplicable error.

C. If you are using the jquery PNG transparent plug-in, the problem does not seem so simple. The original jquery PNG transparent plug-in uses on-page positioning to solve the problem that background-position does not work is caused by limitations. For example, an issue with Overflow:hidden failure, an IMG tag is not controlled, and an absolute location problem cannot be used. I have a simple analysis of its plug-in code, to find the reasons for the above problems, and the original JavaScript code to make some changes to support the page similar to the Background-position positioning effect. So we recommend you to download the modified PNG plugin JS.
In addition, here the IMG tag invalidation is due to the principle of this plugin processing transparency, the original IMG tag is hidden, with a span tag to get the associated style attributes of the IMG tag, the SRC link of the PNG image as Background-image, and apply the PNG transparent filter. That is, the result of code execution is to replace the IMG tag with a span tag. So if you're using an IMG tag to control the size of a picture or any other property, it's useless. The workaround is to use the ID or class control, you give the IMG tag a class, such as "Png_pos", then the plug-in execution, the class will be transferred to the span label, so the "Png_pos" class set style is not lost, Still appear on the page, and there is no compatibility issue.
The following figure shows the page positioning, support hover event, the mouse through the navigation button button background changes in effect, at first glance, like the effect of background-position positioning, is actually used on the page margin positioning effect.

for jquery plug-in under the large PNG image on the page to locate the problem, I specifically wrote a demo page, and provide a package download source files . If you are on the IE6 browser or you have IE6 or IE6 as the kernel browser, it is recommended that you click here , there is a complete code sample description, I believe that I can not escape the above words have a better understanding.

Iv. issues related to extension

Transparent display of 1.PNG8 and Png24
That's a lot of IE6. PNG background transparency refers to a picture of a transparent background saved in the PNG24 format, while the full-transparent background of a PNG image stored in the PNG8 format is supported. One support and one unsupported reason is that the transparent background of PNG24 is alpha transparent background, while the full transparent background of the PNG8 format is the same type as the transparent background of the GIF.

Shown below:

If you are using the IE6 browser, Click here to go to the Demo Instance page

I have encountered a PNG image of the translucent layer directly by the CSS PNG transparent filter as a completely transparent layer of the situation. But today I tried again and again did not appear this situation, I think maybe the PNG image was made with fireworks, save the layer hierarchy information is also saved in. Since, there is no recurrence of such a problem, it is not appropriate to say more, jump to the conclusion.

Said IE6 support Png8 background transparent, but the final picture effect with GIF actually difference is not too, there is a same problem, sawtooth. Like the above picture, said PNG8 format picture looks good, juicy juicy. As long as it is a white background, and PNG default is white jagged, a coincidence, just look good. If it is a dark background, that is Bones Jing met Monkey King-the True colors AH.

On the issue of aliasing, I will write a separate article, here is a simple approach, such as the above picture, the background color is #666666 gray, PNG white sawtooth revealed, the solution is to save the picture in Photoshop, the color of the matte is set to match the background color on the line, For example, here the matte color is set to #666666,
Then save it.

2. IE7 's Alpha Translucent filter and PNG background transparent
The IE7 Alpha Translucent filter affects the normal display of its PNG24 alpha transparent channel. To the Demo instance page effect:

The figure can be seen that the part that should be transparent is now a black group, how an "ugly" word.

If you have a IE7 browser, it is recommended that you put this address http://www.zhangxinxu.com/study/200908/ie7-filter-opacity-png.html in IE7 browser to see, Will have a more intuitive experience and understanding.

V. Summary

IE6 destined to exit the historical stage, but the current domestic situation, such as Internet cafes, are IE6 browser; some of my recent contacts with computers are also used by IE6 browsers. IE8 of the appearance of the IE7 is only the proportion of the IE6, there is no big impact, so this exit time is really not good to say, at least for a period of time is still very specific, so IE6 some of the problems have to come out to say that the problem of PNG transparency is very typical of a problem. Here I also just put the problems I met to summarize, some places may be said to be more vague, some places may have omitted, still others do not want to unfold too much, disorderly the main line. Anyway, is a blog of the first technical class article, intermittent also written for a few days, I hope these bad words and a little amateur instance of the page can be helpful to everyone. At least I learned a lot in the process of writing. Let's make progress together!

Resolve IE6 background picture with gray background turn