IE6中PNG Alpha透明(全集)

站长资源 2024/11/16 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

很多人说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

IE6,PNG,Alpha

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“IE6中PNG Alpha透明(全集)”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

IE6中PNG Alpha透明(全集)

Web 前端开发经验小结

IE6中奇数宽高的BUG

评论“IE6中PNG Alpha透明(全集)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

IE6中PNG Alpha透明(全集)

Web 前端开发经验小结

IE6中奇数宽高的BUG

评论“IE6中PNG Alpha透明(全集)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存