How to use CSS to insert png file in html
在制作页面时，经常会遇到渐变色背景上需要放透明图片的问题，若是采用gif格式的透明图片，图片周围会在不同色块区域出现难看的锯齿。以往比较死板的做法就是将渐变色背景上的图片做成JPG格式，将渐变色也一起做到图片中，但是这样若是改变背景颜色的话，就面临着需要重新制作图片的问题。
采用CSS方式嵌入PNG图片，原先一直都是用于页面背景图片，不过现在我们可以用下面的方式直接将png图片放到html中。
首先，html代码中加入如下代码：
<div id=”test-alpha”><span style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.png’)”><img src=”test.png” /></span>
其中<span>部分的样式是为了在IE下能够正常显示png格式的图片，不过，仅仅只是这样还是不行的。因为，在IE下，由于<span>中的<img>是一张png图片，因此会遮挡住span里的样式。
所以，我们还需要在CSS代码中加入下面几行
##test-alpha span{ display:inline-block}
##test-alpha span img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);display:block; }
这样可以使得IE下<img>中的PNG图片保持全透明状态，从而可以看到<span>样式中的png图片。
为什么不把png文件写到CSS中去呢？这样做的目的在于，我们可以直接在html页面中编辑替换所需要的png文件。
