手机游戏
经典单机
角色扮演
休闲益智
动作冒险
射击枪战
赛车竞速
模拟经营
解密闯关
策略战争
手机软件
时尚购物
体育运动
资讯阅读
教育学习
摄影摄像
生活服务
效率办公
聊天社交
视频盒子
其它软件
新闻资讯
游戏攻略
软件教程
游戏问答
软件资讯
软件技术
叨叨念念
网站技术
技术问答
软件教程
资源资料
原创作品
代码学习
网页设计
网络技术
合集
合集
游戏合集
软件合集
资讯合集
视频合集
首页 > 网页设计 > 网页设计

PNG透明背景的多种方法

作者:星知苑 时间:2010-08-19 09:51:33

用photoshop制作透明背景的PNG图片,直接另存为.png格式的图片,IE7.0,Firefox可以正确识别,但是IE6.0出现问题,png透明针对IE6一直是件挺麻烦的事情。

要实现IE6.0透明背景方法多种多样,现在来介绍几种:

第一种方法:(photoshop法)
photoshop制作好了图片,保存时要选择 另存为web所有格式(ctrl+alt+shift+s) 这个保存才行[break]
PNG图片另存为 PNG-8,256色 的格式 存储就可以了。

第二种方法:(css法)
定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。(注意两处图片的路径写法不一样,本例中,test.png图片与html文件在相同目录)
css:
.pngs {
height: 100px;width: 100px;
background-image:url(test.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.png’);  /* IE6*/
_ background-image: none; /* IE6 */
}

xhtml:
 
这种方法的优点就是使用简单方便,但是不能作为背景,且只能用作单个png图片的使用。如果要作为背景,需要新增加一个div层,并设置其position:relative;

css
.png div{position:relative;}

xhtml:

 

<div class='png'><div>

 



CSS PNG透明背景问题解决方法


这种方法可以使用在那些png图片不多,且不需要repeat的情况下。

第三种方法:(js法)
<script language="JavaScript">
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
          }
       }
    }    
}
window.attachEvent(“onload", correctPNG);
</script>
这种js先判断是否IE,然后判断ie版本,版本在6.0下则判定函数,给png的图片添加滤镜。
使用起来的确方便,无论多少图片都可以解决,但是依然无法repeat。
 

良心推荐

枪战射击游戏大全
  • 战地模拟游戏
  • 狙击手请就位游戏下载
  • 反恐精英突击安卓破解版下载
  • 孤岛先锋网易下载安装
  • 全民精英游戏下载安装
  • 小小突击队无限钻石版
火爆的各种枪械子弹穿梭的声音还有各种不同的任务的玩法,进行组队也可以进行单机的枪战手游相信是很多玩家的喜欢,丰富的故事剧情还有各种无限子弹无限复活,就是为了更快速的进行杀敌,有多种玩法这里小编收集了很多好玩不腻不管是单机还是手游的枪战类型的风格都是很多,赶紧来这里进行下载开始冲锋陷阵吧。

相关资讯