logo图片最好用gif格式 png格式就像一块膏药很难看

mabg · 发表于 2011-5-8 08:32:18

现在的logo是png格式，IE6等浏览器打开就像一块膏药贴在上面很难看，建议采用gif格式以解决这个问题。
现在很多人在用IE6等浏览器

cj22tiancai · 发表于 2011-5-9 10:35:52

IE6 浮云，早已抛弃。

181943208 · 发表于 2011-5-9 14:07:49

[ 本帖最后由 181943208 于 2011-5-9 14:08 编辑 ]

你不会而已.....
很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。
这个BUG给我们带来了很大的困扰。
但是这仍然存在很多问题，比如半透明的PNG背景图片。

第一种方法：AlphaImageLoader 筛选器
微软给出了一个解决方案：http://support.microsoft.com/kb/294714/zh-cn

使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader难以实现插入图片<img src=”.png”/>透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

第二种方法：PNG Transparency in IE
使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度
注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
官方原文：http://codingforums.com/archive/index.php?t-80555.html
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

第三种方法：IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本，今天重点介绍的一个方法。
使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
* 支持<img src=”">元素。
* 支持的背景PNG图像（不像许多其他的脚本！）
* 支持CSS1背景重复和位置（通过可选插件）
* 背景图像可以被界定内置或在外部的样式表。
* 自动处理改为钢骨混凝土/背景通过正常的JavaScript （例如鼠标悬停翻车） -没有特殊的编码需要。
* 改变支持包括CSS的’类别’的变化因素。
* 采用自动变通的<a href=”">要素巴布亚新几内亚背景因素。
* 微小的脚本（快速下载）。
* 领有牌照的下一个自由软件许可证。
如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤，将此添加到您的网页：
1. 复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
2. 复制并粘贴到您的网站的CSS或HTML ：
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
这的CSS选择器必须包含标签/内容要巴布亚新几内亚支持-基本上，给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。宏达相对H TML文件的位置（不相对的CSS文件！）。例如，你可能看起来像这样：
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
3. 如果您的网站使用的子文件夹，打开。宏达文件在文本编辑器如Windows记事本，并改变blankImg变数，包括正确道路blank.gif像这样：
IEPNGFix.blankImg = '/images/blank.gif';
同样的路径是相对的HTML文件。否则，你将看到一个“破碎的形象”的图形！
4. 如果你想支持CSS1背景重复和背景位置，请务必包括附加。 js文件在您<head> ：
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
否则，背景图片可以工作，但不会重复或立场。
5. 可以舒舒服服地坐下欣赏！也许考虑捐助，以支持该脚本的发展如果你喜欢您所看到的，因为我花了数百小时的开发，测试和支持它：）。另外，我一定会感谢一个入链接您的网站到地雷！
官方原文：http://www.twinhelix.com/css/iepngfix/
如果你有兴趣了解更多信息或另一种方法激活的脚本保持审定的CSS相容性，看到源代码演示文件。
———————————————————————–
如何解决共同问题
1.我已经贴在CSS中，但我pngs并不透明！
请务必记住，路径个文件是相对于HTML文件，而不是的CSS文件（如的CSS背景图像）。如果您想要测试的路径，插入： alert('This works!');进入。宏达文件。
2.它的工程离线而不是在线。
第一次尝试解压这个预设的示范和上传到Web服务器原样。如果它不工作，您可能有一个MIME类型的问题。您必须确保您的服务器发送正确的MIME类型“文本/的X组成部分”的。宏达文件。尝试之一，这两个容易修复程序：
3.上传的。 “ htaccess ”文件，该脚本的下载压缩到Web服务器上，这将使阿帕奇发出正确的MIME类型。
4.而不是所谓的“ IEPNGFIX.HTC ”从你的CSS ，上传IEPNGFIX.PHP的同一文件夹中，并呼吁不是，这也发出了正确的MIME类型。
5.我pngs是透明的，但有一个有趣的边界或红色的“ X ”图标。
检查blankImg变量设置正确的。宏达文件，再次相对应的HTML文件，载PNGs 。
图像扭曲，或此脚本休息，我的网页布局。
当适用于图像没有设置方面，该脚本将尝试与“猜测”正确的图像尺寸和适用的。如果它获得做错了什么，给您一个明确的图像width 。
链接或表单元素一个png’d元素是不能点击。
测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

第四种方法：IE PNG Fix v1.0 / 2.0 Alpha 3
使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
官方原文：http://code.google.com/p/ie7-js/
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

mabg · 发表于 2011-5-9 16:42:16

我弄不明白为什么不用GIF格式？

181943208 · 发表于 2011-5-10 12:00:28

经常听到很多人说GIF比PNG好而且大部分人还在用着GIF 我在这里要说的是如果不做GIF动画,GIF完全可以忽略了.
首先我们分析下什么是GIF格式什么是PNG格式
====================朴素的分割线=========================
一.GIF
维基百科中GIF的介绍:
GIF(Graphics Interchange Format)图形交换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一.
优点:
1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
2. 可插入多帧，从而实现动画效果。
3. 可设置透明色以产生对象浮现于背景之上的效果。
缺点:

1. 由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩图像。
专利
在早期，GIF所用的LZW压缩算法是Compuserv所开发的一种免费算法。然而令很多软件开发商感到意外的是，GIF文件所采用的压缩算法忽然成了Unisys公司的专利。据Unisys公司称，他们已注册了LZW算法中的W部分。如果要开发生成（或显示）GIF文件的程序，则需向该公司支付版税。在2003年6月20日，LZW算法在美国的专利权已到期而失效。在欧洲、日本及加拿大的专利权亦已分别在2004年的6月18日、6月20日和7月7日到期失效。
====================朴素的分割线=========================
二.PNG
维基百科PNG的介绍
PNG，是一种非失真性压缩位图图形文件格式。PNG格式是非失真性压缩的，允许使用类似于GIF格式的调色板技术，支持真彩色图像，并具备阿尔法通道（半透明）等特性。现在有很多人使用PNG格式于互联网及其他方面上。
PNG的的英文名称为Portable Network Graphics，即便携式网络图片。另有说法是名称来源于非官方的“PNG is Not GIF”。
特性
* 支持256色调色板技术以产生小体积文件
* 最高支持48位真彩色图像以及16位灰度图像。
* 支持阿尔法通道的半透明特性。
* 支持图像亮度的gamma校正信息。
* 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
* 使用无损压缩
* 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
* 使用CRC循环冗余编码防止文件出错。
* 最新的PNG标准允许在一个文件内存储多幅图像。
PNG是W3C标准，并在2003年11月10日作为W3C建议发布。
PNG是没有专利的,也就是说他是Free的
PNG出道比较晚,但是正如jquery一样正在迅速普及.
====================朴素的分割线=========================
三.小结:
PNG分为两种格式: PNG-8和PNG-24
PNG-8跟GIF一样支持单色透明.GIF有的有点PNG-8都有,GIF没有的PNG-8还有,比如:同样的文件PNG-8格式的却比GIF要小.
PNG-24是支持alpha通道透明的格式.支持半透明.IE6不支持PNG-24,但是他完全支持PNG-8
如果是不透明的PNG-24,IE6也是完美支持,之所以说IE6不支持PNG-24是因为PNG-24的半透明会在IE6里显示不正常.
PNG-8跟GIF一样最高支持256色,PNG-24支持48位真彩色,有时候比JPG更好,这一点不在讨论范围.

mabg · 发表于 2011-5-10 18:27:56

学了知识。
不过我就是看现实-------只有实用才是最好！

afushan · 发表于 2011-5-11 09:50:36

见仁见智。。

日月的化石 · 发表于 2011-5-12 15:08:27

(EM:166:)好

coolbg · 发表于 2011-5-12 15:10:58

用PNG插件即可解决

coolbg · 发表于 2011-5-12 15:13:07

PNGinIE6插件，官方前端工程师可以考虑一下

		自动登录	找回密码
密码			立即注册