Allows ie6 to support png transparent images, ie6png Images

Allows ie6 to support png transparent images, ie6png Images

A common problem is that ie6 does not support transparent png images. But in fact ie6 only does not support the png-24 format of transparent background images, but the transparent background of the png-8 images are still supported, but the png-8 pictures only 256 colors, put in any browser will display the white tooth.

When the code is like this:

<style type="text/css">    .gif{        width: 400px;        height:200px;        background:#f00 url(png8.png) no-repeat;     } </style><div class="gif"></div>

 

Div in the background picture is transparent background png-8 pictures:

The browser opens the following results (chrome, firefox, and ie6 + are all of the following results ):

 

 

See these white sawtooth to cry blind, how to remove this disgusting tooth, ps to save the png-8 image, there are multiple options, the result of the test shows that the Sawtooth value can be minimized when the "diffuse transparency imitation color" is selected,

 

As shown in, this is not so disgusting:

But it is far from enough. The visual effect is still too bad. Internet query, this is because of the problem caused by the png-8 white strip, you can save the picture before the color of the mixed edge settings and the background to solve.

In ie6, the effect is as follows. other browsers also show the same effect:

 

At this time ie6 png-8 transparent background pictures can be normally displayed, and not only for ie6, other browsers are also used, it seems very easy to use, but only 256 color png-8, color is not rich, and now widely used png-24 has 2 ^ 24 = 16.78 million colors, can display a lot of color, and no sawtooth. So if the source image color is very rich, then can only be converted to the png-8 image as a degradation method to use ie6. Another problem is that the background color of the covered area of the image is a monochrome color. If there are multiple colors, the image will always become a sawtooth.

 

We need to find a more flexible method, ie has a dedicated AlphaImageLoader filter, can let ie6 support the transparent background of the png-24, rather than the transparent color display as gray, here to use ie hack skills, set background-image to none to remove the background image and load the image with a filter. In the AlphaImageLoader filter, the parameter src points to the png-24 image to be displayed, sizingMethod has three optional values: crop: placed directly into the container, the upper left corner of the image alignment to the upper left corner of the container, image: adjust the edge of the container to wrap the entire image, scale: Adjust the image to fill the entire container.

      .gif{        width: 400px;        height:200px;        background: #f00 url(ie6.png) no-repeat;        *background-image:none;        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_24.png',sizingMethod=crop);      }

 

The effect is correct:

 

However, it should be noted that there will be a prompt in the browser. You need to click to allow the filter to run the filter effect. Otherwise, not only will there be no filter effect, but because the background image is canceled, the image will not be visible at all (only red, words cannot be seen, as shown in the figure below ):

If it is difficult to add filters to images, you can also use js to write a function to capture all the png images on the page and add the ie filter effect. However, if users like to disable js scripts, they will be okay. Another method is to use the proprietary css extension-Behavior of ie to reference the. htc file to solve the png transparent background problem (The. htc file is also used to solve the rounded corner box ):

div{   behavior:url(iepngfix.htc);}

 

Here is a website introducing this technology: Ghost. If the htc file is not referenced, you can see that the background is gray-blue. After the htc file is referenced, the transparent background is displayed normally (you need to click to allow blocked content to be displayed normally ): the png method that allows ie6 to support transparent background is summarized here. Since it is compatible, it is impossible to be perfect. The specific technology used to complete web page development should be considered before making a decision. Although developers always complain that it is disgusting to be compatible with the old version of the browser, the old version of the browser has also made great contributions.

Although Internet Explorer 6 is already quite popular, it may take some time for Internet Explorer 6 to exit the historical stage because there are still a large number of xp users and the family will not upgrade their browsers without changing their computers. In ie6, we need to fix various bugs and wait for ie6 to fail.

 

Supplement:

Some people in the comment area say that Internet Explorer 8 is not compatible. I don't want to talk much about it. I use data to talk about it and collect statistics on the browser market share from Baidu. In the past three months, ie8 accounts for 21.62%, ie7 accounts for 5.12%, and ie6 accounts for 3.85%. As a developer, I think you are not compatible with earlier ie versions, is it because your website is not open to 30% of users? If your website is not compatible with Internet Explorer 6, four out of every 100 people will report negative feedback. Of course, this statistics is based on the general situation. If you know that the specific user group accessing your website uses chrome or firxfox browser, you can certainly not be compatible with earlier ie versions. The js framework basically discards earlier versions. This is a fact, because most JavaScript frameworks are written by foreigners! Foreigners basically use chrome browsers, which is not in line with national conditions. There are still many people in China who are using earlier versions of IE browsers, and even are too reluctant to upgrade. I always think that not compatible with multiple browsers is not a good developer, because compatibility with various browsers is an internal task for every developer, and you can never ask users to use the same browser as you.

------------------------------- Reprinted to indicate the source ^ _ ^: http://www.cnblogs.com/suspiderweb/