通常网页上的背景透明（无背景）的图片都是用gif制作的，如果用png格式图片话，则通常无法像想象中那样达到背景透明的效果，背景色变成了蓝灰色。下面就谈谈用CSS和js去控制网页上png图片的达到透明效果的方法。
其实最主要的动作就是运用javascript解决IE以下版本无法支持网页上PNG图片透明效果的问题,其他瀏览器或是在IE7版本对於PNG图形的支援上多半都是没问题
一般说来,网页呈图片透明不外乎两种情况
第一种情况是属於页面内容的图片透明化,检查网页原始码即可找到相关图片,最常见是应用在网站标题图片的设计，另一种则是透过CSS撰写背景语法来呈现整个区块(包含DIV内的文字背景)或是单纯只需要背景具备透明来让整个画面更有层次感,这些设计方式对网页视觉设计师来算是相当常见的,但如果说要做到能够让IE6以下、IE7、FireFox等等各家瀏览器都能正常瀏览无误,那就有点功课得要做一做了，那就是浏览器兼容问题。
第一种方法最快最简单的方式就是应用现有的JAVASCRIPT方式来处理,你可以在网页写入一段javascript,可以参考这裡,直接在网页上写入或以css引入一个htc元件(html component),内崁Javascript,接著在CSS撰写元件位置img {behavior:url("ie6png.htc");},以上适用情况為全站都需要这样的效果时候使用,当然你可以利用Google查询关键字 pngfix.js或是css png有更多的参考资料
第二种方法主要是运用CSS的撰写来达到背景透明,假设你撰写了某个标籤#ABC,并引用PNG背景:
#abc { background:url(123.png) },你可以察觉几乎只有在IE7,Firefox和其他瀏览器可以瀏览,如果想在IE6以下版本正常瀏览你可以使用filter的方式来解决
#abc{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='123.png', sizingMethod='crop'}
Scale:div宽高大小，底图随宽高延伸。
image:无论你div值设大设小，都依图片原始大小显示。
crop:不论图大图小，仅显示在div区块范围裡，不比例缩放。
上述方式日前我结合了lightbox运用之后我发现灯箱效果也无法使用,另一个问题是作用在这个标籤下的连结link会產生无法连结的状况,不过幸运的是我找到A list Apart有关这个问题解决方式…有兴趣的话可以自己去找看看吧!
来源：http://user.qzone.qq.com/37362892/blog/1238120268
