css 半全透明 让IE6适用png照片半全透明处理方式

2021-03-11 10:58 jianzhan
大家都知道,全透明文件格式的PNG24在IE6全透明一部分可能被灰色取代。
那末,究竟有甚么方式能够处理这个bug?

处理方式
①用PNG8文件格式照片取代PNG24文件格式的照片
用fireworks导出来Alpha方式的PNG8文件格式的照片,Alpha方式的PNG8文件格式照片适用半全透明,在IE6下透明和半全透明一部分会显示信息满足全透明,而且会存在锯齿。假如对客户体验危害并不是很大的话,能够考虑到1下用这个方式。

②CSS滤镜
在运用了全透明PNG照片的挑选器里边再加1下编码:
_background: transparent;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/nav.png', sizingMethod='scale');
这类方式的缺陷:
(a)只能用于情况照片是全透明的状况下,网页页面中的PNG全透明照片失效;
(b)情况照片没法平铺,只能拉伸;
(c)致使该地区内的连接和按钮无效;
处理方式:在该地区外界加上连接或按钮,再用margin遮盖到该地区上面;还可以用position精准定位完成。

③jQuery PNG fix软件
相对前面的方式,jQuery的IE6下png全透明软件相对性要好大些。软件jquery.pngFix.js免费下载和实际应用方式。
因为详细地址上的是英文,在这里還是简易汉语翻译1下吧。
在head內部加上:

拷贝编码
编码以下:

<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>//jq库,请自主免费下载
<script type="text/javascript" src="jquery.pngFix.js"></script>//留意相对路径
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>

还可以对于特殊的挑选器

拷贝编码
编码以下:

<script type="text/javascript">
$(document).ready(function(){
$('.png').pngFix( );//.png改为应用了全透明PNG照片的挑选器
});
</script>
<![endif]-->

缺陷:不适用backgrond-position和background-repeat。

④DD_belatedPNG软件
DD_belatedPNG适用backgrond-position和background-repeat,另外DD_belatedPNG还适用a:hover特性,和<img>.
这个软件应用了微软的VML語言开展绘图,而别的大部分处理PNG难题的方式用的是AlphaImageLoader滤镜,软件DD_belatedPNG免费下载详细地址和实际应用方式。
应用方式汉语翻译:

拷贝编码
编码以下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png');// .png改为应用了全透明PNG照片的挑选器
</script>
<![endif]-->

我沒有具体用过这类方式,可是在写这篇文章内容做检测的情况下基本觉得還是这个方式较为好。下一次切图的情况下会尝试1下用这类方式。