收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4009|回复: 14

[讨论] 有关PNG图片透明

[复制链接]
发表于 2009-6-25 18:21:50 | 显示全部楼层 |阅读模式
在IE下我要怎么样才能让PNG为全透明(不用JS的情况下,还有什么样式都不用)

说白了``
那个PNG格式的透不透明跟它的PNG属性有关吗?
 楼主| 发表于 2009-6-25 18:23:17 | 显示全部楼层
png分png-8跟PNG-24还有?
回复 支持 反对

使用道具 举报

发表于 2009-6-25 23:31:49 | 显示全部楼层
还有 PNG-32。Photoshop 中把它归为 PNG-24。

IE6 不能正常显示 PNG-32。即含有 Alpha 通道的半透明效果的 PNG 图片。
回复 支持 反对

使用道具 举报

发表于 2009-6-25 23:32:34 | 显示全部楼层
另外,不知道楼主所说的“全透明”是什么意思。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-26 08:57:14 | 显示全部楼层
原帖由 [i]birdstudio 于 2009-6-25 23:31 发表
还有 PNG-32。Photoshop 中把它归为 PNG-24。

IE6 不能正常显示 PNG-32。即含有 Alpha 通道的半透明效果的 PNG 图片。

也就是说透明
但一般从PS里面直接保存出来的PNG图片不是全透明的
有灰色的BG
回复 支持 反对

使用道具 举报

发表于 2009-6-26 08:58:39 | 显示全部楼层
png8透明 用的是索引色透明,也就是说让某个特定颜色透明(不显示),用法类似GIF,在PS中的PNG24和FW的PNG32是同个东西,拥有alpha透明,也就是半透明状。
IE6是不支持alpha透明的,所以要使用滤镜来使它支持。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-26 08:59:27 | 显示全部楼层
原帖由 [i]Ronecy 于 2009-6-25 23:56 发表
png全透明那就没东西了

在网页上当然用png-24,不过建议你少用png透明图片,因为png透明图片在IE6不能正常显示,有时还会被卡巴屏蔽。

如果你真需要用png透明图片,那你可能需要使用iepngfix 2.0来兼容IE6,ie ...

像有很多大网站用到很多PNG图片,那些网站用的是PNG都可以正常显示那是为什么(他们也没加什么特殊的全码跟JS)
回复 支持 反对

使用道具 举报

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

回复 8# qepwq520 [楼主] 的帖子

因为他们没用到透明png,如果真用到透明png不处理一样会在IE6不能正常显示。

其实我看很多大站对于样式、布局方面都有很多bug,你留意去看就会发现。

png处理不好的确会给我们带来影响,如果你做的项目考虑到用户使用感受的话,你会结合很多测试工具去检测,问题往往从这里总结出来
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-26 09:12:17 | 显示全部楼层
原帖由 [i]Ronecy 于 2009-6-26 09:10 发表
因为他们没用到透明png,如果真用到透明png不处理一样会在IE6不能正常显示。

其实我看很多大站对于样式、布局方面都有很多bug,你留意去看就会发现。

png处理不好的确会给我们带来影响,如果你做的项目考虑到用 ...

那我们应该用什么格式的呢?
GIF有锯齿·····
回复 支持 反对

使用道具 举报

发表于 2009-6-26 09:30:16 | 显示全部楼层
用png-24

另外如果你一定用透明的话,我给你一个demo页面:http://www.twinhelix.com/css/iepngfix/demo/
这里有使用方法
回复 支持 反对

使用道具 举报

发表于 2009-6-26 09:31:02 | 显示全部楼层
链接带多了,要分两次才准发


但你下载要下v2.0,这个页面下:http://www.twinhelix.com/test/
回复 支持 反对

使用道具 举报

发表于 2009-6-26 09:46:15 | 显示全部楼层
PNG8格式透明支持所有的浏览器。
另外,新人发的帖子没见几个人看
http://bbs.blueidea.com/thread-2935054-1-3.html
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-26 10:08:29 | 显示全部楼层
谢谢楼上的前辈们··
嘿嘿 以后还请多多指教________
回复 支持 反对

使用道具 举报

发表于 2009-7-9 09:26:43 | 显示全部楼层

也可以用JS解决!

JS

<script type="text/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 + ";"
+ "filterrogidXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>







CSS

#dmpx #flash .right{ width:735px; height:438px; float:right; z-index:1; filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true,SizingMethod=crop, src="../images_dmpx/zxjs.png"); background:none;}
回复 支持 反对

使用道具 举报

发表于 2009-7-9 09:34:48 | 显示全部楼层
原帖由 [i]birdstudio 于 2009-6-25 23:31 发表
还有 PNG-32。Photoshop 中把它归为 PNG-24。

IE6 不能正常显示 PNG-32。即含有 Alpha 通道的半透明效果的 PNG 图片。


PNG-24也能包含 Alpha 透明 ,IE6 照样不支持

用了js 。。不管是24 还是32位的 png , IE6 照单全收
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-29 10:01 , Processed in 0.124686 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表