IE6中PNG Alpha透明(全集)

所属分类: 网页制作 / 应用技巧 阅读数: 536
收藏 0 赞 0 分享

很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG,疯狂的IE6只是不支持png的Alpha透明。
这个BUG给我们带来了很大的困扰。
但是这仍然存在很多问题,比如半透明的PNG背景图片。
Gulu77整理了4种IE6中PNG Alpha透明的方法:
测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
这里用IE6测试,插入的图片和背景图片没有透明。

第一种方法: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

更多精彩内容其他人还在看

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多