加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

IE6兼容png24

(2011-02-15 14:15:47)
标签:

png24

锯齿

ie滤镜

ie6半透明

it

分类: CSSie6
Firefox,IE7/8都能支持png24透明/半透明图片,可万恶的IE6不支持
Bug病症:
    ie6会让半透明的图片叠加在白色上面,让它不透明,在完全透明的位置填充白色,产生锯齿

吖真老中医处方:

background:url(../images/×.png) no-repeat left top;
_background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/×.png');

第一句为正常背景语句不解释
第二句消去ie6的背景图
第三句使用只有IE支持的滤镜读入对应的背景图

注意:滤镜的图片路径是以页面为基点,并非以CSS文件。

此方法可让IE6支持png24,效果甚佳屡试不爽,但是
1、图片只能用背景图显示
2、不能同时对该元素进行定位

如果需要用这方法又要定位,那也还是有办法的,就是在此元素外加个包围元素,给它定位即可(不能给它定位,没说不能给它老爸定位哈)

这个只限制与给单独的元素添加,想批量的修改,就添加如下的js:
<script language="javascript">  
function correctPNG()  
   
   for(var i=0; i<document.images.length; i++)  
      
     var img = document.images[i]  
     var imgName = img.src.toUpperCase()  
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")  
        
       var imgID = (img.id) ? "id='" + img.id + "' " : "" 
       var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
       var imgStyle = "display:inline-block;" + img.style.cssText  
       if (img.align == "left") imgStyle = "float:left;" + imgStyle  
       if (img.align == "right") imgStyle = "float:right;" + imgStyle  
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle       
       var strNewHTML = "<span " + imgID + imgClass + imgTitle  
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
       img.outerHTML = strNewHTML  
       i = i-1  
        
      
   
function alphaBackgrounds(){  
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, ''); 
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); 
   for (i=0; i<document.all.length; i++){ 
      var bg = document.all[i].currentStyle.backgroundImage; 
      if (bg){ 
         if (bg.match(/.png/i) != null){ 
            var mypng = bg.substring(5,bg.length-2); 
   //alert(mypng); 
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";  
            document.all[i].style.backgroundImage = "url('')";  
   //alert(document.all[i].style.filter);  
                                                        
      
   
 
 
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {  
window.attachEvent("onload", correctPNG);  
window.attachEvent("onload", alphaBackgrounds);  
 
</script>  
这样就可以为所欲为了,不过不能实现平铺效果,而且速度会因此变慢,谨用慎用……

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有