How to set ie6 background transparency. Solution to ie6 background color transparency and png image transparency_html/css_WEB-ITnose

IE6 browser makes us love and hate it. What I love about it is that it allows us to write more standardized code, but what we hate about it is that it has too many nonsensical common bugs in IE6 (click for details), which makes us very anxious. Now I use Baidu browser to investigate, and the domestic share is less than 6%. However, I am afraid of encountering websites that need to be adjusted to be compatible with IE6.

Among them, one of the common problems in IE6 is the IE6 transparent background problem. Transparent backgrounds are mainly divided into issues of background color transparency and background image or png image transparency.

1. The background color of IE6 is transparent

In general browsers, the way to write a transparent background for a box is:
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;

where -moz- is the Firefox prefix -webkit- is the Google and Apple browser prefix -kthml- for Linux desktop system Browser

IE6 background is transparent You need to use filter: filter:alpha(opacity=50); It’s no problem to use genuine IE6 to test, sometimes ietester It's not easy to use, and we also know that ietester is not that complete in the first place.

IE8 is also special: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

This is almost the same, and it solves the problem of transparent backgrounds in all browsers .

2. IE6’s problem with png image background transparency

First of all, it’s not that ie6 does not support png image transparency, ie6 supports png8 image transparency, but does not support png24 and png32 image transparency. Therefore, when we create pictures that need to be transparent, if we want to consider IE6, it is best to use png8 format. Both ps and firework can choose the exported png version.

We also know that the color of png8 is not as rich as png24. Sometimes, png24 must be used. Therefore, Teacher Xiaoqiang prepared a js file for everyone. This js specifically solves the transparency problem of ie6 png 24. It can make all png images on the entire page transparent without having to deal with each image one by one. It is very labor-saving and very simple to use. The usage is as follows:

The first step is to copy the following code into the page. Pay attention to the path problem!





The red part is the selector, most of them are included, but there is no need to replace them with *.

The second step is to put the following js file into our site. Until now, it is still easier to use the method of dealing with the transparency problem of IE6 PNG images.

The above is what Teacher Xiaoqiang shared with you. I hope it will be helpful to everyone.

Xiaoqiang Linglingyi, share knowledge with you.

js file download: Please click here