Summary of the failure of displaying PNG background transparent images and links in IE

It is really a headache to use .png as a background image in the past two days!

Now let's make a summary: first, display a. PNG transparent image as the background image: # div1 {Height: 600px; width: 260px; padding: 20px; Background: URL (.. /images/weddinga.png);} however, the transparency of the PNG Image under IE6 is not displayed, once you know it, you must write a style for IE -- add a filter for IE: * HTML. weddinga {Background: none; filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = "true", sizingmethod = "corp", src = "absolute path/images/weddinga.png"); (Reference the background image using an absolute or relative URL address: Note: sometimes the background image cannot be referenced. Solution: 1. absolute path reference is recommended. Image; 2. Note the relative path of the user. The path should be relative to the HTML file rather than the relative path of the CSS file. For example, in the imagesaa.gif?cssdemo.css=demo.html?demo.css file, the image reference path should be "images/aa.gif" instead of ".. /images/aa.gif ")} OK, now the effect of using PNG for transparent background has been achieved. however, in the subsequent work, the unexpected filter will cause the link in the area to expire in IE6. go to Baidu again and see that the recommended solution is to add "position: relative;" to the link. Code To make it relatively floating. then I added the position: relative to the link a or the container that contains the link in # div1 to solve the problem. method 2: Separate the layer of the displayed background image with the content in the layer, set absolute positioning for the two layers, and set the Z-index, let the two layers overlap (that is, let the layer of the display content float above the layer of the display background image) for example: original code:

After the content to be displayed in the current container is changed:

The content originally contained by the # div1 container is now independent of the content, and is floated on the background layer through absolute positioning. (Appendix: update -- there is a better solution for solving the PNG Image in IE6: By referencing DD_belatedPNG_0.0.8a-min.js And then pass the specified PNG image or style name to the method as a parameter; For example: <! -- [If IE 6]> <SCRIPT src = "DD_belatedPNG_0.0.8a-min.js"> </SCRIPT> <SCRIPT> Dd_belatedpng.fix('.png _ style1,. png_style2 '); </SCRIPT> <! [Endif] --> For more information, see This website ) -------------------------------- The following describes the filter syntax. (The following is an excerpt from the cat's blog. ) 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: An image is displayed between the background and content of the object within the boundary of the object container. 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.