Remove the png background color of IE6, and perform a rough analysis on the implementation of DD_belatedPNG.

Remove the png background color of IE6, and perform a rough analysis on the implementation of DD_belatedPNG.

DD_belatedPNG.js is a plug-in used to process the png transparent background in ie6. In ie6, there are many plug-ins for processing png, and there are also various implementation methods. However, this article does not discuss which is the best solution, but simply analyzes the implementation process of DD_belatedPNG.js (hereinafter referred to as DD.

DD is implemented through VML (Vector Markup Language), and two shapes are inserted before the element to be applied to simulate the specific effect.

DD creates two shapes and inserts them to the front of the applied element. Because the z-index value is the same, the following elements will overwrite the preceding elements, therefore, the first two shapes inherit the z-index of the element to be applied. The shape of the simulated background-image is on the shape of the simulated background-color. This constitutes the entire structure.

When DD is used in the img label, the img label is hidden and the following shape is displayed. The src address of fill in the shape is the src address of the current img label, the size and position also inherit the current img tag.

When DD is used for non-img tags, it is necessary to simulate each sub-attribute of background in css. image is the image of the current Tag: url (.. /images/png.png), extract the values in the brackets to fill the image shape, color to fill the color shape, followed by repeat, this is a little complicated, first, you must determine the direction. If it is repeat, no processing can be done, but if it is no-repeat or repeat-x, repeat-y will be slightly more complex, you need to obtain the clip value of the special css feature of vml through calculation, such as style = "CLIP: rect (1px 501px 501px 1px);" to crop the display content, no-repeat only shows the size of an image, while repeat-x shows the width of the element.The Image Height. repeat-y indicates the image width.Element height. The following is the position attribute, which reads the background-position and then assigns a value to the position attribute of fill in the image shape.

The advantages of the "dd的 ()" feature can be implemented in the background, which is convenient. Only the "dd_belatedpng.fix().png") "parameter can be added with the css selector of the tag to be applied.

DD is implemented through vml. If the number of png files to be processed on the page is too large, the browser may occupy of the CPU; the tag to be processed will be triggered by layout, as an in-Row Element, there may be some problems; sometimes there may be dislocation problems, especially when using sprite. These issues need to be studied.

Instance used:

<!--[if IE 6]>    <script language="JavaScript" type="text/javascript" src="js/DD_belatedPNG.js"></script>    <script language="JavaScript" type="text/javascript">        DD_belatedPNG.fix(".png");    </script><![endif]-->