About PNG transparent images that IE6 is not compatible with lcuc

The hateful IE6 did not support the transparent effect of PNG. It was not found by FF that it was a mess to browse IE6 today. It was a mess that IE6 did not support the transparent effect of PNG, crazy. I have found two articles on the Internet to solve this problem. To avoid forgetting, I would like to comment on them here.

Apply the transparent or translucent features of PNG images to make very beautiful webpages. Firefox and opera have very good support for PNG, but they both ignore the existence of PNG images. Although IE7 already supports IE6, it still does not work. I checked some information and basically solved this problem. I am going to apply it to pjskin.
Although javascript programs that allow IE6 to support PNG transparent backgrounds are not convenient, CSS is better. The following code is used:
Ie5.5 + alphaimageloader Filter
Reference content reference content
Syntax:
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = Surl)
Attribute:
Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false
True: default value. Filter activation.
False: the filter is disabled.

Sizingmethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container. Crop: Cut the image to fit the object size.
Image: default value. Increase or decrease the size boundary of an object to fit the image size.
Scale: scale the image to adapt to the size boundary of the object.
SRC: required. String ). Specify the background image using an absolute or relative URL. If this parameter is ignored, the filter will not work.

Note:
Within the boundary of the object container, an image is displayed between the background and content of the object. You can also cut and change the size of the image. If the file is loaded in PNG (Portable Network Graphics) format, the transparency between 0% and 100% is also provided.
The transparency of images in PNG (Portable Network Graphics) format does not affect your choice of text. That is to say, you can choose to display the content after the completely transparent area of images in PNG (Portable Network Graphics) format.

After learning about the above content, you can write a simple CSS Code (not completely correct code ):
Reference content reference content

# Div1 {
Height: 600px;
Width: 260px;
Padding: 20px;
Background-repeat: Repeat;
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "bj1.png"

}

This simple CSS code can normally display the PNG transparent background in IE, but will not show the background in ff. Cause Analysis:
The alphaimageloader filter can only be supported by IE. FF does not support this filter.
Some people write this for the first time:
Add the following paragraph in the Code: Background-image: url(bj1.png );
Although adding such a piece of code can solve the FF problem, it is a problem with IE: The new background will overwrite the background of the filter, resulting in invalid filter display, at this time, we will use the difference between IE and FF in CSS reading:
Firefox, opera, and other browsers that fully support PNG transparent images also support sub-selectors (>), while IE does not recognize (including IE7 ), we can use this to define the PNG Image styles in Firefox, opera, and other browsers. The Code is as follows:
Reference content reference content
HTML> body # div1 {
Background-repeat: Repeat; Background-image: url(bj1.png );
}

At the same time, we can define filters in IE browsers through wildcards (*) that only Ie can recognize. The Code is as follows:
Reference content reference content
* # Div1 {filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "bj1.png ")

}

# Div1 {} puts some settings shared by IE and FF to reduce the size of the code file. The final result is as follows:
Reference content reference content
# Div1 {
Height: 600px;
Width: 260px;
Padding: 20px;
Background-repeat: Repeat;

}

HTML> body # div1 {
Background-repeat: Repeat; Background-image: url(bj1.png );
}
* # Div1 {filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "bj1.png ")

}

Note that the alphaimageloader filter will invalidate the links and buttons in the region. The solution is to add the position: relative for the link or button, so that the code is relatively floating. Alphaimageloader cannot set repeated backgrounds. Therefore, it has a high precision requirement on image cropping.

 

 

I have been learning how to use PNG on the webpage over the past few days. I also tried to create a skin with PNG as the background and finally succeeded. Here I will write down the process, for your reference. (For transparent PNG applications, refer to my previous log)
In fact, the main problem solved by using the PNG transparent feature for webpage is that IE6 reads PNG images, and filters need to be applied:
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = Surl)
Example:
* # Container # Header
{Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = image, src = "http://huziyi.com/png/h_bj.png ");

}
At the same time, to allow ff to read the background separately (FF does not support filters, but supports the PNG transparent feature), write a separate segment of CSS:
HTML> body # container # header {
Background-image: url(h_bj.png );
}
Xing xuanyu told me that there are still better optimization methods to reduce the reading speed in IE7: Use * html # To write the filter code for IE6 separately, HTML> body can be read by IE7 and ff at the same time, so that IE7 can avoid the use of filters to speed up reading. I have not tested.
In the PNG skin, the cropping requirements of PNG files are very high. It is best to set the cropping and layers accurately. If the link fails, you can not only set relative positioning in the Link CSS, but also set relative positioning for the layer where the content is located.
We hope this content will be helpful for pjskin production, and the specific code optimization is still in progress.