我们在做ie6下png透明的时候往往是用别人写好的JS文件来解决,这样很方便比如DD_belatedPNG.js
但是这样的JS无法解决缩放后的<img>标签透明,缩放后的图片会被它无视掉。
解决办法:
其实用JS来解决PNG透明问题,JS最终还是给需要透明的元素加上了IE特有的透明滤镜与我们手动在CSS上添加IE透明滤镜是一样的。
IE6透明滤镜的语法请网上自行搜索,大致是以下写法
普通方法:
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png" ,sizingMethod="noscale");
特殊方法:
以下是我写过某个网站的代码
DD_belatedPNG.fix('.png');//先解决普通png透明 //再解决缩放过的<img>标签png透明 $(function(){//jquery $('img.forie6').each(function(){ //为父级元素添加背景 $(this).parent().attr('style', 'cursor:pointer;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="scale",src="'+ $(this).attr('src') +'");background-image:none;'); $(this).remove();//移掉img }); });
我用了Jquery来找到所有class 为forie6的img标签,如果你对jquery不熟?那你还是回家洗洗睡吧......
我们可以将<img>标签指向的图片地址作为其父级元素的background-image,再对其父级元素添加透明滤镜,并且滤镜中的sizingMethod="scale"指定其缩放,前提是父级元素宽高得指定,这样背景图片就会缩放至父级元素的宽高,这样就OK了