PNG图片 兼容IE FF 等浏览器的代码写法

成都/网页设计师/13年前/1009浏览
PNG图片 兼容IE FF 等浏览器的代码写法

一 PNG透明背景CSS写法

.png{background:url(http://www.028wz.net/img/logo.png) left top no-repeat !important; /*For Firefox*/*background:none;/*For IE7

一 PNG透明背景CSS写法

.png
{
background:url(http://www.028wz.net/img/logo.png) left top no-repeat !important; /*For Firefox*/
*background:none;/*For IE7 & IE6*/
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.028wz.net/img/logo.png',sizingMethod='crop');/*For IE6*/
}

 

二 PNG 透明图片

这里插入一个JS
<script>
// JavaScript Document
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
       for(var j=0; j<document.images.length; j++)
       {
          var img = document.images[j]
          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
             j = j-1
          }
       }
    }   
}
if(window.attachEvent){
 window.attachEvent("onload", correctPNG);
}else if(window.addEventListener){
 window.addEventListener("load",correctPNG,true);
}else{
 window["onload"]=correctPNG;
}
</script>
<img src="http://www.028wz.net/img/logo.png">

本文转自:http://www.028wz.net/

1
Report
|
4
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一大波可爱小动物
Homepage recommendation
相关收藏夹
《阿凡达3》来了
《阿凡达3》来了
《阿凡达3》来了
《阿凡达3》来了
精选收藏夹
作品收藏夹
茶包装
茶包装
茶包装
茶包装
精选收藏夹
作品收藏夹
白酒包装 酒产品
白酒包装 酒产品
白酒包装 酒产品
白酒包装 酒产品
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
品牌制造社
品牌制造社
品牌制造社
品牌制造社
精选收藏夹
作品收藏夹
小家电
小家电
小家电
小家电
精选收藏夹
作品收藏夹
大家都在看
Log in