跨浏览器透明解决方案

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

图片包含全透明像素时

对于这种不包含半透明像素的图片,可以导出为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图片的方式来实现,也就回到图片半透明的问题。边框色的半透明同前景色半透明解决方法一样。