IE中的alpha透明度解决方案
我正在构建一个包含大量具有透明背景的 png-24 文件的网站。在 IE 6 中,它们显然无法正确显示,因此我需要某种可靠、良好的解决方案来解决 IE 中的 PNG 问题,并且需要很少的工作并且可靠。有什么好主意吗?
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
对于 IE6 透明度,我遵循个人流程:
1.如果只有一两个 PNG 图像(如徽标或普通图像),我只需使用
过滤器
:< em>问题:如果应用于链接,它将不再可点击。可能适用于
h1#logo
并使a
透明。2. 如果我有很多 24 位 PNG 文件,或特殊用例(重复背景等),我会使用 DD_belatedPNG
对于 IE7 + IE8 很重要: 您不能对
filter:alpha
(用于IE 中元素的整体opacity
,并且 jQuery 也使用它来设置 24 位透明 PNG 图像的opacity
) 属性。它将其更改为看起来像 8 位透明度,所有非 100% 不透明或透明的内容都呈现黑色背景。For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use
filter
:Problems: If applied to a link, it will no longer be clickable. Possibly apply to the
h1#logo
and have thea
be transparent.2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the
filter:alpha
(which is used for overallopacity
on an element in IE and also used by jQuery to setopacity
) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.以下是针对 ie6 的一些不错的 png 修复:
http://labs.unitinteractive.com/unitpngfix.php< /a>
http://www.twinhelix.com/css/iepngfix/
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
网上有很多 IE PNG 修复程序,基本上都使用相同的技术。较旧的 Internet Explorer 不直接支持 PNG 中的 Alpha,但它们都有一个过滤器可以支持 Alpha。因此,将以下代码编写为对象 css 的一部分,会将
src
中的图像设置为元素的背景:这样,您就可以轻松地在 Internet Explorer 中显示透明度。然而,获取 png 修复脚本之一(在 JavaScript 中)并将其包含到页面的条件注释中要容易得多。然后脚本将使您的所有图像自动工作。
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the
src
to the background of the element:That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
为此,我们使用 Dean Edwards 的 IE7。 (在 IE7 发布之前就这么命名。)它对于这类事情很有好处。
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
目前有很多选择可以使其发挥作用。标准是通过CSS应用DirectX过滤器来改变PNG在IE6中透明。甚至有一些脚本会在从 IE6 或更低版本的客户端加载网页时自动执行此操作。
http://www.google.com/搜索?btnG=1&pws=0&q=透明+png+ie6
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6