我应该如何在 IE 6 中使用透明 png 而不是背景重复？
下面的代码有一个重复的背景图像“thinline.png”。 最重要的是 4 层透明 PNG：cardshadow.png、steel.png、startjobapplicationshadow.png 和 startapplication.png
我的目标是使此代码在 IE6 中看起来不错，而不会扰乱其他浏览器。 IE 的这个功能被广泛记录，但我还没有能够让它工作。 请给我一些想法或例子来帮助我解决这个问题。
谢谢。 迈克
代码：
<div style="height: 333px; width: 100%; position: absolute; top: 68px; background-image:url(Resources/thinline.png); background-repeat:repeat-x; ">
<div style="position: absolute; height: 300px; width: 215px; top: 15px; right: 50%; margin-right: -390px; z-index: 2; ">
<img src="Resources/steel.png" style="position: absolute; top: 0px; z-index: 3;"/>
<img src="Resources/cardshadow.png" style="position: absolute; top: 0px; margin-top: -8px; margin-left: -10px; z-index: 2">
<img src="Resources/startjobapplication.png" style="margin-left: -65px; position: relative; top: 258px; left: 50%; z-index: 5; display: block;"/>
<img src="Resources/startjobapplicationshadow.png" style="margin-left: -67px; margin-top: -20px; position: relative; top: 258px; left: 50%; z-index: 4; display: block;"/>
The code below has a repeating background image "thinline.png". On top of that are 4 layered transparent PNGs: cardshadow.png, steel.png, startjobapplicationshadow.png and startapplication.png
My goal is to make this code look good in IE6 without messing up other browsers. This feature of IE is widely documented but I have not been able to get it working. Please give me some ideas or examples to help me solve this.
Thanks.
Mike
The Code:
<div style="height: 333px; width: 100%; position: absolute; top: 68px; background-image:url(Resources/thinline.png); background-repeat:repeat-x; ">
<div style="position: absolute; height: 300px; width: 215px; top: 15px; right: 50%; margin-right: -390px; z-index: 2; ">
<img src="Resources/steel.png" style="position: absolute; top: 0px; z-index: 3;"/>
<img src="Resources/cardshadow.png" style="position: absolute; top: 0px; margin-top: -8px; margin-left: -10px; z-index: 2">
<img src="Resources/startjobapplication.png" style="margin-left: -65px; position: relative; top: 258px; left: 50%; z-index: 5; display: block;"/>
<img src="Resources/startjobapplicationshadow.png" style="margin-left: -67px; margin-top: -20px; position: relative; top: 258px; left: 50%; z-index: 4; display: block;"/>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
查看 Dean Edwards 的 IE7。 它是一个适用于 Internet Explorer 6 的 javascript 库，可以使透明 png 正常工作，并修复 css 错误并添加对其他 css 功能的支持。 我过去使用过这个库并取得了一些成功（它比添加特定于 IE 的 css hack 更容易。）。 但是，加载时页面可能会短暂地看起来不正确。
Take a look at IE7 by Dean Edwards. It's a javascript library for Internet Explorer 6 that makes transparent pngs work correctly, as well as fixing css bugs and adding support for additional css features. I've used this library in the past with some success (It's easier than adding IE-specific css hacks.). However, the page may briefly look incorrect while loading.
使用 Microsoft 的 AlphaImageLoader 作为背景存在问题。 他们基本上不会重复。
有 2 种解决方案：
如果您的图像可以拉伸 - 则在 AlphaImageLoader 中使用适当的设置：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/file.png', sizingMethod='scale')如果您的图像无法拉伸，那么您应该使用 JavaScript 解决方案例如 IE PNG 修复 v2.0 Alpha 3。
请注意，它使用 Microsoft 的 .HTC 文件，必须将其发送到具有特定 (
text/x-component) 元类型的浏览器，否则它将无法工作。there is a problem with using Microsoft's AlphaImageLoader for backgrounds. They basically will not repeat.
There are 2 solutions:
If your image can be stretched - then use appropriate setting in AlphaImageLoader:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/file.png', sizingMethod='scale')If your image cannot be stretched then you should use JavaScript solution like IE PNG Fix v2.0 Alpha 3.
Note it uses Microsoft's .HTC files which has to be sent to browser with specific (
text/x-component) meta-type, otherwise it won't work.使用DD_belatedPNG。
Use DD_belatedPNG.
我还没有对此进行测试，但您可以尝试这个。 将此类应用于适当的图像。
我没有可用的 IE6 副本，因此我无法确保它是否有效。
我还发现 this 似乎可以解决 JS 的问题。
阅读更多内容后，最后一个解决方案可能是处理该问题的最佳方法。
I haven't tested this out but you might try this. Apply this class to the appropriate images.
I don't have a copy of IE6 available so I can't make sure this works.
I also found this which appears to solve the problem with JS.
After reading a bit more the last solution is probably the best way to deal with it.
对于背景图像，如果您在实际代码中没有使用内联样式，并且根据您的背景图像和可接受的质量损失，您可以将 png 保存为 gif 并使用
.divclass 作为div 的类名或 #id。
* html将覆盖 ie6 的背景图像。For the background image, if you are not using inline styles in your actual code and depending on your background image and acceptable loss of quality, you can save the png as a gif and use
with .divclass being the class name or #id of the div.
The
* htmlwill override the background image for ie6.