去除IE6的png背景色，DD_belatedPNG的实现粗略分析

DD_belatedPNG.js是用来处理ie6中png透明背景的一个插件。ie6中处理png的插件很多，实现方式也是各式各样，不过这次不讨论哪个是最佳方案，只是单纯的分析一下DD_belatedPNG.js ( 以下简称DD ) 的实现过程。

DD是通过VML (Vector Markup Language) 实现的, 通过在被作用的元素前面插入两个shape来模拟具体的效果。

DD会创建两个shape并插入到被作用的元素前面，因为z-index值相同时，后面的元素将覆盖在前面的元素之上，所以前面的两个shape都会继承被作用元素的z-index。模拟background-image的shape将会在模拟background-color的shape之上。这样就构成了整个结构。

DD作用在img标签时，隐藏掉img标签，显示后面的shape，shape中fill的src地址为当前img标签的src地址，而大小位置也是继承了当前img标签。

DD作用在非img标签时，需要模拟css中background的各个子属性，image就是当前标签的image:url(../images/png.png)，截取括号内的值填充到image的shape中，color则填充到color的shape中，接下来是repeat了，这个稍微有点复杂，首先要确定方向，如果是repeat的话，可以不做任何处理，但如果是no-repeat或repeat-x，repeat-y就会稍微复杂一点，要通过计算获取vml的特有css特性CLIP的值，如style=”CLIP:rect(1px 501px 501px 1px);” 来剪裁显示内容，no-repeat只显示一个图片的大小，而repeat-x则显示元素的宽图片的高，repeat-y显示图片的宽元素的高。下面是position属性，读取的是background-position，然后为image的shape中fill的position属性赋值。

DD的最大的优点就是可以实现背景的平铺，使用的时候也非常方便，只需要DD_belatedPNG.fix(“.png”)，参数中加入需要作用的标签的css选择器就可以了。

DD是通过vml实现的，如果页面中需要处理的png数量太多的话，可能会造成浏览器占cpu100%的情况；被作用的标签会被触发layout，作为行内元素的话，可能会出现一些问题；有时候会出现错位的问题，特别是使用sprite的时候。这些问题还有待研究。

使用实例：

<!--[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]-->