请选择进入手机版 | 继续访问电脑版

设为首页收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 地图任务 - 给官方提建议

论坛活动及任务 归纳网站最新活动更新邮件保护帐号安全 第一季积分兑换活动 - 12周年上海聚会照片

万元奖励等你拿——点点网模板设计大赛 畅销译文征名——让最火的畅销书，印上你的标签 联系招聘客服蓝色理想帮你找工作！

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 老问题重提：IE6下png背景透明

发新帖

查看: 33340|回复: 61

老问题重提：IE6下png背景透明 [复制链接]

Lion5859　楼主

荣泰

银牌会员 

帖子: 369
体力: 1633
威望: 0
居住地: 广东省广州市

发表于 2008-10-25 18:24:39 |显示全部楼层

众所周知的ＩＥ６破东西就不多说了，现小弟正在做一项目，涉及到Ｎ多的ＰＮＧ图片，ＩＥ７和ＦＦ就不多说了全部通过，就这ＩＥ６整得我想摔电脑。
网上也找到Ｎ种方法，但是并不是都有效，最终只能实现ＩＥ６下的<img>图片透明，而无法实现背景图片为ＰＮＧ的透明！

现小弟跪求大家给个权威的解决方案啊，最好同时解决图片和背景图片都在ＩＥ６下实现透明效果，不胜感激，今天找了一天累了……又被ＢＯＳＳ骂了，唉。

ＰＳ：
文件结构为：所有图片放在images文件夹里，所有样式放在styles文件夹里，所有脚本程序放在scripts文件夹里，而所有ＨＴＭＬ文件放在外面与前面三个文件夹同在一级。

[ 本帖最后由 Lion5859 于 2008-10-25 18:27 编辑 ]

西部数码顶级域名注册商39元抢注！

使用道具举报

烟灰受伤

帖子: 296
体力: 1123
威望: 0
居住地: 天津市南开区

发表于 2008-10-25 18:35:58 |显示全部楼层

我是用这个解决png在ie6下透明。

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
};
};
};
if(navigator.userAgent.indexOf("MSIE")>-1)
{
window.attachEvent("onload", correctPNG);
};

复制代码

加油~~

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

Lion5859　楼主

荣泰

银牌会员 

帖子: 369
体力: 1633
威望: 0
居住地: 广东省广州市

发表于 2008-10-25 18:40:41 |显示全部楼层

楼上的只能解决如<img src="aa.png" alt="">这类的图片，
对于背景图片格式为ＰＮＧ的则无法作用啊

使用道具举报

Lion5859　楼主

荣泰

银牌会员 

帖子: 369
体力: 1633
威望: 0
居住地: 广东省广州市

发表于 2008-10-25 18:43:58 |显示全部楼层

如：
<input type="text" id="search_box" />
#search_box{
background:url(../images/search.png);
}

以上定义一个搜索框，其背景为一ＰＮＧ格式的图片，因为在这搜索框下面还有一个渐变条。
2楼的方法并不适用我提到的这个问题。

使用道具举报

烟灰受伤

帖子: 296
体力: 1123
威望: 0
居住地: 天津市南开区

发表于 2008-10-25 18:51:19 |显示全部楼层

实验了下。这样是可以的。

<style type="text/css">
<!--
body {
background-color: #FF6600;
}
#png {
background-image:url(1.png);/*IE7,FF*/
_background:none;/*IE6*/
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="1.png");/*IE6*/
}
-->
</style>
<input type="button" id="png" style="width:132px; height:114px;" value="111" />

复制代码

[ 本帖最后由 joelioa 于 2008-10-25 18:53 编辑 ]

加油~~

使用道具举报

Lion5859　楼主

荣泰

银牌会员 

帖子: 369
体力: 1633
威望: 0
居住地: 广东省广州市

发表于 2008-10-25 18:58:19 |显示全部楼层

这个方法我也试过，不知道怎么着我这边看不到效果。

且不说这个方法可不可行，如果ＰＮＧ背景图片众多，如此以来岂不得写Ｎ多ＨＡＣＫ？有没有ＪＳ控制的好办法呢？

使用道具举报

帖子: 324
体力: 1153
威望: 0

发表于 2008-10-27 08:54:47 |显示全部楼层

我也正在郁闷中，

用的是五楼的方法，做测试时是可以的，放在我的页面里就是不行，快疯掉了，

使用道具举报

帖子: 65
体力: 235
威望: 0

发表于 2008-10-27 09:28:26 |显示全部楼层

用滤镜的话的传到服务器才能测试起作用 .
而且上面的连接会失效
解决方法是为链接定义一个相对定位属性。position:relative

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
      width:401px;
      height:223px;
      filter

rogidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://bbs.blueidea.com/attachments/2006/9/11/bg_nT9Vi2i45To0.png')
}
div a{position:relative}
/*]]>*/
</style>
</head>
<body>
<div><a href="#">27.IE6使用滤镜使PNG图片透明后，容器内链接失效的问题。</a></div>
</body>
</html>

忙不能说明你很重要。

使用道具举报

帖子: 96
体力: 191
威望: 0

发表于 2008-10-27 09:32:16 |显示全部楼层

笨方法：

判断ie版本，如果为6，弹出个警告框：

您的版本过低，请[下载]最新版本。

使用道具举报

Lion5859　楼主

荣泰

银牌会员 

帖子: 369
体力: 1633
威望: 0
居住地: 广东省广州市

发表于 2008-10-27 11:28:54 |显示全部楼层

……楼上你

使用道具举报

Lion5859　楼主

荣泰

银牌会员 

帖子: 369
体力: 1633
威望: 0
居住地: 广东省广州市

发表于 2008-10-27 11:30:03 |显示全部楼层

有没有办法可以批量处理呢，因为我要用到的ＰＮＧ背景图片好多……

使用道具举报

初级会员 

帖子: 82
体力: 371
威望: 0

发表于 2008-10-27 11:47:57 |显示全部楼层

有二种方法，一种是在定义样式结束后再添加样式：* html div.#search_box {filter: progid

XImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="图片名字和路径.png");background:none;}
另外一种方法，是调用jquery库文件引用firepng这个样式，具体的可以看一下这个网站：http://jquery.khurshid.com/ifixpng.php
祝你顺利做好！

使用道具举报

zidanezhicong　

我爱阿仙奴

银牌会员 

帖子: 571
体力: 2056
威望: 1
居住地: 广东省深圳市

发表于 2008-10-27 15:48:23 |显示全部楼层

png也有分png8，png24，png32.
ie6支持png8的索引色透明。不过png8质量较差，但比gif体积更小。适合一些小图标之类的。

png24和png32的透明，ie6就不支持，
如果是直接在网页中插入图片，可以用js处理；
如果是背景，可以用滤镜处理；

但用到需背景透明的时候不多，个人觉得。

[ 本帖最后由 zidanezhicong 于 2008-10-28 15:56 编辑 ]

<del>IE</del>

使用道具举报

怿飞

帖子: 2374
体力: 12538
威望: 125
居住地: 浙江省杭州市

发表于 2008-10-27 15:49:39 |显示全部楼层

考虑到效率性能，建议hack在IE6下使用gif图片

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

A君　

银牌会员 

帖子: 37
体力: 1434
威望: 0
居住地: 江苏省泰州市

发表于 2008-10-27 17:23:13 |显示全部楼层

哈，我也没找到好办法。放弃 IE 6 吧，直接拒绝 IE 6 的用户访问

www.aijun.org

使用道具举报

daan　

新手上路 

帖子: 3
体力: 48
威望: 0
居住地: 广东省广州市

发表于 2008-10-27 18:37:58 |显示全部楼层

:我最近也在做大量PNG图片的页面

就是把png放在最下面的层其他浮在png上面

www.kan

使用道具举报

飞猫

帖子: 276
体力: 1024
威望: 0
居住地: 广东省深圳市

发表于 2008-10-27 22:18:32 |显示全部楼层

1.使用js；
2.搞一个伪静态透明。比如：叶面背景是蓝色，那么用php程序把png图片都添加一个蓝色背景；

冬天来临，春天就不会远了。

使用道具举报

寻寒

帖子: 219
体力: 731
威望: 0

发表于 2008-10-27 22:21:47 |显示全部楼层

http://labs.unitinteractive.com/unitpngfix.php
看下这个,希望对你有用.

潔靜精微

使用道具举报

xhlv　

帖子: 97
体力: 292
威望: 3

发表于 2008-10-27 23:13:14 |显示全部楼层

建议优化一下，能不用png的地方就不用png，难道你的页面真需要那么多半透明通道？
少数几个png是可以接受的，也比较好处理，一律用png那就是你自己的问题了。

blog.xhlv.com

使用道具举报

高级会员 

帖子: 194
体力: 700
威望: 0
居住地: 浙江省杭州市

发表于 2008-11-20 13:09:45 |显示全部楼层

完美解决IE6下png图片透明&背景图片透明：

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
   {
   var img = document.images
   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.currentStyle.backgroundImage;
   if (bg){
      if (bg.match(/.png/i) != null){
         var mypng = bg.substring(5,bg.length-2);
//alert(mypng);
         document.all.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
         document.all.style.backgroundImage = "url('')";
//alert(document.all.style.filter);
      }
   }
}
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}

[ 本帖最后由 ShakeSpace2 于 2008-11-20 13:11 编辑 ]

使用道具举报

bjzc　

雷克萨斯

银牌会员 

帖子: 43
体力: 1531
威望: 0

发表于 2008-11-20 13:36:49 |显示全部楼层

我还以为有什么突破性的解决方案呢!原来还是那一套,唉

使用道具举报

老韩

钻石会员 

帖子: 3424
体力: 5893
威望: 5

发表于 2008-11-20 13:51:45 |显示全部楼层

IE6不支持PNG, 硬用滤镜放一大堆PNG 页面肯定卡
客户端资源严重浪费... 浏览体验非常差
如果不是万不得已建议放弃,

使用道具举报

帖子: 398
体力: 1065
威望: 11
居住地: 辽宁省沈阳市

发表于 2008-11-20 14:11:36 |显示全部楼层

我也来说一个：
《JavaScript DOM高级程序设计》豆瓣：http://www.douban.com/subject/3082278/
这本书里有解决方案，而且解释的比较详细。出版社网站上能下载到这本书的代码。

使用道具举报

有点累

银牌会员 

帖子: 422
体力: 1440
威望: 0
居住地: 湖北省武汉市

发表于 2008-11-20 14:14:09 |显示全部楼层

回复 15# A君的帖子

可以看看我的站：
http://www.okeyweb.cn
上面的logo就是一个png图片
实现在所有浏览器下都是透明的。

最给力网址导航

使用道具举报

雪幕天涯

帖子: 67
体力: 950
威望: 0
居住地: 广东省深圳市

发表于 2008-12-10 17:32:05 |显示全部楼层

qq.com 首页的天气预报那就是PNG搞的,用的JS

http://www.xuemu.net〖雪幕天涯〗俺的小家

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2008-12-10 21:04:20 |显示全部楼层

http://bbs.blueidea.com/viewthre ... p;page=1#pid4304787

下载6＃那个人的附件。

集艺术之精湛于邮票。

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2008-12-10 21:20:55 |显示全部楼层

哦还有个重要问题。

我记不清了：好像不论在什么地方使用滤镜，滤镜所连接的那个图片的路径是以当前html文件为起始点的，而不是以这个css文件，不然png图片仍然是灰色。

集艺术之精湛于邮票。

使用道具举报

帖子: 21
体力: 75
威望: 0

发表于 2008-12-10 21:35:58 |显示全部楼层

http://zhuanti.blogbus.com/laofengxiang/
看这个网站是不是这样的效果.

要的话加我QQ:162047
两个JS文件执行一下就行了.最完美的解决方法

使用道具举报

帖子: 15
体力: 85
威望: 0

发表于 2008-12-11 14:25:22 |显示全部楼层

如果不嫌多的话可以引入jquery～加上一个插件fixpng。我的项目里就是这样做的……

使用道具举报

缘客

帖子: 199
体力: 1011
威望: 0
居住地: 黑龙江省哈尔滨市

发表于 2009-2-11 09:04:19 |显示全部楼层

belatedPNG，楼主搜索一下，这是解决IE6 PNG透明比较新的JS，很方便。

web设计师群:47071188

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-1-15 00:01 , Processed in 0.524273 second(s), 10 queries , Gzip On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部