How to Use PNG transparent images in IE6

Methods for using PNG transparent images for IE [non-js methods]

 

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 and IE8 support both IE6, they still do 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 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 (the code is not completely correct): 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: the program code 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: program code * # 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: program code # 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.