跨浏览器透明解决方案

透明主要指图片中包含的透明像素以及背景色、前景色和边框色的半透明。

图片包含全透明像素时

对于这种不包含半透明像素的图片，可以导出为GIF格式来支持IE6。但是只适用于图片包含少量颜色时，通常Logo、icons等颜色只包含几种。对于色彩丰富的图片，只能采用PNG图片，并通过一些方法解决IE6的PNG支持问题。

图片包含半透明像素时

此时，只能使用PNG格式，IE7+及其他现代浏览器都很好地支持PNG格式，对于IE6必须采取某种方案支持，详见此篇文章总结的方案：IE6 PNG透明终极解决方案。由于网站常采用CSS Sprite，所以我首选的方法是DD_belatedPNG，不过此方法在某些情况下会出现bug。我在使用Slidesjs时，pagination的hover状态会失效；在使用其他js文件时也可能会失效。对于这种失效的情况，可以针对IE6放弃使用半透明像素，换用其他实色图片，或者设置元素的背景色来换一种风格。

背景色半透明

这要分两种情况：一种是元素不包含任何内容，那么可以通过设置opacity属性，对于IE6-8可使用alpha滤镜，比如某些弹出层的半透明遮罩层；另一种是元素包含内容，由于使用opacity属性会使内容也变为半透明，因此不可行。此时，对于IE9+及其他现代浏览器可以使用RGBA或HSLA设置背景色，而对于IE6-8可以通过渐变滤镜来实现，可参考此文：RGBa Browser Support。当然，还可以通过PNG图片来实现，不过有点麻烦，且需要加载图片。

前景色和边框色的半透明

前景色半透明，也即文字的半透明，IE9+及其他现代浏览器可以通过RGBA或HSLA设置。而对于IE6-8，只能通过PNG图片的方式来实现，也就回到图片半透明的问题。边框色的半透明同前景色半透明解决方法一样。