话不多说,直接附上总结表格——
格式 |
操作 |
Chrome/FF/IE7/IE8 |
IE6 |
gif |
不透明 |
全透明的部分转为白色,半透明的部分转为常色(对于不支持的颜色转为白色) |
同左 |
索引色透明 |
支持全透明,不支持半透明 |
同左 |
|
alpha透明 |
以索引色透明方式进行输出 |
同左 |
|
png |
不透明 |
同gif的不透明 |
同左 |
索引色透明 |
同gif的索引色透明 |
同左 |
|
alpha透明 |
支持全透明,支持半透明 |
支持全透明,半透明的部分输出全透明 |
|
png24 |
-- |
不支持全透明,不支持半透明 |
同左 |
png32 |
-- |
同png8的alpha透明 |
同左 |
jpg |
-- |
不支持全透明,不支持半透明 |
需要说明的是,如果一张图片既包含了全透明部分,又包含了半透明部分,同时也包含了非透明部分,不管三者的层叠次序如何,浏览器都是按照点阵扫描的方式进行图片输出,可以理解为各有各的输出法则,彼此互不影响。(但对于IE6,尤为关键的一点是——如果层叠半透明部分和非透明部分重叠的话,半透明的部分会叠加进非透明的部分进行输出)。
要让IE6显示半透明,首先需要选择png8或者png32,然后,应用AlphaImageLoader属性,代码如下——
/* 这里的属性值加不加引号并无影响 */ _filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ); _background-image:none;