当前位置：文江博客话题详情

IE6 PNG 透明度

发布于 2024-07-15 19:42:36 字数 33 浏览 10 评论 0原文

如何修复 IE6 中背景图像的 PNG 透明度错误？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤凫 2024-07-22 19:42:36

我喜欢 David Cilley 不久前编写的这个 Javascript 解决方案。它摆脱了兼容浏览器的束缚，并且可以与您想要的任何后端一起使用。但它仍然需要一个空白的 gif 图像。

将这些函数添加到您的 HTML 标头或其他现有 .js 中：

<script type="text/javascript">
    function fixPngs(){
    // Loops through all img tags   
        for (i = 0; i < document.images.length; i++){
            var s = document.images[i].src;
            if (s.indexOf('.png') > 0)  // Checks for the .png extension
                fixPng(s, document.images[i]);
        }
    }

    function fixPng(u, o){
        // u = url of the image
        // o = image object 
        o.src = 'images/spacer.gif';  // Need to give it an image so we don't get the red x
        o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
    }   
</script>

将以下条件注释放在底部（页脚部分，就在

)：

<!--[if lte IE 6]>
    <script language="javascript" type="text/javascript">
        //this is a conditional comment that only IE understands. If a user using IE 6 or lower 
         //views this page, the following code will run. Otherwise, it will appear commented out.
        //it goes after the body tag so it can fire after the page loads.
        fixPngs();
    </script> 
<![endif]-->

如需更全面地解决 IE6 的奇怪问题，请尝试 IE7 Javascript 库。

I like this Javascript solution writen by David Cilley some time ago. It gets out of the way of compliant browsers and can be used with any back-end you want. It does still require a blank gif image though.

Add these functions to your HTML Header or other existing .js include:

<script type="text/javascript">
    function fixPngs(){
    // Loops through all img tags   
        for (i = 0; i < document.images.length; i++){
            var s = document.images[i].src;
            if (s.indexOf('.png') > 0)  // Checks for the .png extension
                fixPng(s, document.images[i]);
        }
    }

    function fixPng(u, o){
        // u = url of the image
        // o = image object 
        o.src = 'images/spacer.gif';  // Need to give it an image so we don't get the red x
        o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
    }   
</script>

Put the following conditional comment at the bottom (footer section, just before
</body>
):

<!--[if lte IE 6]>
    <script language="javascript" type="text/javascript">
        //this is a conditional comment that only IE understands. If a user using IE 6 or lower 
         //views this page, the following code will run. Otherwise, it will appear commented out.
        //it goes after the body tag so it can fire after the page loads.
        fixPngs();
    </script> 
<![endif]-->

For a more comprehensive approach to IE6 oddities, try the IE7 Javascript library.

回复收藏 0 原文

北恋 2024-07-22 19:42:36

用这个：
http://www.twinhelix.com/css/iepngfix/

这也适用于 IE 5.5，但不适用于 mac 版本的 IE 或早期版本的 IE。

我在很多网站上使用过它并且没有遇到任何问题。

然而，在脚本启动之前，PNG 周围有时可能会出现一个丑陋的灰色框。

回复收藏 0 原文

黎歌 2024-07-22 19:42:36

使用 PNG 行为。

ie6.css:

img {
   behavior: url("pngbehavior.htc");
}

page.html:

<!--[if IE 6]> 
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Use PNG Behaviour.

ie6.css:

img {
   behavior: url("pngbehavior.htc");
}

page.html:

<!--[if IE 6]> 
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

回复收藏 0 原文

夜吻♂芭芘 2024-07-22 19:42:36

我要去这里拿死灵法师徽章。 :)

这并不完全是一个修复，而是我时不时使用的一个方便的解决方法，用于支持 IE6 上的透明度，而无需任何额外的代码。它并不总是符合要求，但很多时候都是符合要求的。

这个想法是，大多数时候您都需要在固定颜色背景上显示 PNG。 PNG 文件可以指定背景颜色，IE6 将遵循它。您要做的就是获取 TweakPNG 实用程序并打开您的 PNG 文件。在那里，您将能够添加一个 bKGD 块，它指定所需的背景颜色。只需输入显示 PNG 所需的颜色即可。

请注意 - PNG 文件通常包含一些值来补偿不同的显示设备。可能有一些东西，比如预期的色彩空间、色度、伽马等。这些本身并不坏，但 IE 不知何故误解了它们，结果是 PNG 显示得比应有的更暗（或者也许 IE 是唯一一个正确的人？我不记得了...）

无论如何，如果您希望每个浏览器都以相同的方式显示您的 PNG，您应该使用上述实用程序删除这些块。

回复收藏 0 原文

不一样的天空 2024-07-22 19:42:36

twinhelix png 修复应该可以帮助您

回复收藏 0 原文

小傻瓜 2024-07-22 19:42:36

例如 Dean Edwards 的 ie7.js

回复收藏 0 原文

岁月苍老的讽刺 2024-07-22 19:42:36

请注意，AlphaImageLoader 转换可能死锁 IE6< /a>.

使用 PNG8 而不是常规 PNG32 。您只能使用 256 种颜色和 1 位 alpha 透明度，但它可以避免浏览器随机死锁。

回复收藏 0 原文

所谓喜欢 2024-07-22 19:42:36

您可以勇敢地简单地声明您的网站在 IE6 上可能无法很好地呈现。也许这不是最有商业头脑的做法，但如果我们让 IE6 消亡，那对我们所有人（甚至是微软）都是有利的。当然，由于大量在线活动发生在装有 IE6 的企业计算机上，因此这种情况不会很快发生。 :(

回复收藏 0 原文

森罗 2024-07-22 19:42:36

1. 在文档的 head 块内添加适用于 IE6 的条件 css：

<!--[if (IE 6)]>
    <link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->

2. 在元素中指定类名：


<td class = yourClassName>

3.在ie6.css中，应用过滤器。您必须指定宽度和高度。将背景图像设置为clear.cache.gif，如果没有这些属性，过滤器将无法工作：


.yourClassName{
    width:8px;
    height:22px;
    background: url("locationOfBlankImage/clear.cache.gif");
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}

1.Add conditional css for IE6 inside the head block of your document:

<!--[if (IE 6)]>
    <link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->

2.Assign class name in your element:


<td class = yourClassName>

3.In ie6.css, apply filter. You have to specify width and height. Set background image to clear.cache.gif, the filter doesn't work without those properties:


.yourClassName{
    width:8px;
    height:22px;
    background: url("locationOfBlankImage/clear.cache.gif");
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}

回复收藏 0 原文

半边脸i 2024-07-22 19:42:36

我在一个项目中所做的事情是从 Paul Irish 的 HTML5 Boilerplate 并将条件样式分配给整个页面。他在此处详细介绍了该内容，但简单来说，这个想法是在站点上每个页面的 HTML 中添加条件检查，应用于 body 标记。就像这样：

<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->

IE 浏览器将读取这些注释并应用这些样式。其他浏览器会忽略它。其巧妙之处在于您可以设计符合标准的网站、使用 PNG 等。然后，在 CSS 中，在标准样式之后添加其他样式，以满足 IE 浏览器的需求。例如，我正在研究的一种样式使用 PNG 背景图像。为了让这个在 ie6 中发挥得很好，我可以使用 javascript/htc 来替换它们，应用许多 hacks 之一。或者我可以这样做：

.someStyle {
    background: url(/images/someFile.png) no-repeat; 
background-position: -0px -280px;

}

.ie6 .someStyle {
   background: url(/images/someFile.gif) no-repeat; 
background-position: -0px -280px;

}

通过向我的 ie6 用户提供 GIF，就不会出现占用 CPU 的解决方法进程，如果您曾经在可能运行 ie6 的 POS 机器上进行过测试，这实际上是一个非常大的问题。而且，我并没有为我的好用户和好浏览器放弃任何质量。

它确实需要两个单独的文件，但我认为它比大多数实现更干净。另外，使用 .ie6 .whatever 代替单独的 ie6.css 文件，可以让您的修复位于它们所应用的样式旁边，我发现它更干净且更易于使用。它还鼓励您在设计时考虑 ie6 用户，而不是完成设计然后惊恐地回头看

What I'm doing in a project I'm working on is taking a cue from Paul Irish's HTML5 Boilerplate and assigning conditional styles to the entire page. He goes into it in detail here, but briefly, the idea is to add conditional checks in the HTML of every page on your site, applied to the body tag. Like so:

<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->

IE browsers will read these comments and apply those styles. Other browsers will ignore it. The genius of this is you can design standards compliant websites, use PNGs, whatever. And then, in your CSS, add additional styles placed AFTER your standard styles to give IE browsers what they want. For instance, one style I'm working on uses a PNG background image. To make this play nice in ie6, I COULD use javascript/htc to replace them, apply one of the many hacks out there. OR I could do this:

.someStyle {
    background: url(/images/someFile.png) no-repeat; 
background-position: -0px -280px;

}

.ie6 .someStyle {
   background: url(/images/someFile.gif) no-repeat; 
background-position: -0px -280px;

}

By feeding a GIF to my ie6 users, there's no CPU hogging workaround processes, which is actually a very big issue if you've ever tested on the kind of POS machine likely to be running ie6. And, I haven't given up any quality for my nice users with nice browsers.

It does require two separate files, but I think it's a much cleaner implementation than most. Also, instead of a separate ie6.css file, using .ie6 .whatever keeps your fixes right next the the styles they apply to, which I find cleaner and easier to use. It also encourages you to consider ie6 users as you go, instead of finishing your design and then looking back in horror

回复收藏 0 原文

路弥 2024-07-22 19:42:36

这是一篇关于这个问题的很棒的文章。综上所述，它提供了一个名为 SuperSleight 的 JS 库。我过去曾使用过它并取得了相当大的成功。

回复收藏 0 原文

-残月青衣踏尘吟 2024-07-22 19:42:36

好吧，我对 html/js 几乎是新手，但我想我必须稍微改变 Rob Allen 的答案来解决两个问题：

AlphaImageLoader() 正在改变我的图像的纵横比，所以我需要恢复原始大小 加载图像后。
fixPngs()，如果从 html 末尾调用，则在加载文档之后但在加载所有图像之前调用。

所以我改变了我的fixPngs()只附加一个事件：

function fixPngs() {
  // Loops through all img tags
  for(i = 0; i < document.images.length; i++) {
    var u = document.images[i].src;
    var o = document.images[i];

    if(u.indexOf('.png') > 0) {
      o.attachEvent('onload', fixPng);
      o.src = u;
    }
  }
}

fixPngs()仍然从html的末尾被调用：

<!--[if lte IE 6]>
  <script language="javascript" type="text/javascript">
    // Do this after the page loads
    fixPngs();
  </script>
<![endif]-->

fixPng()现在获取调用者，分离事件，保存原始尺寸，调用AlphaImageLoader( ）并最终恢复尺寸：

// u = url of the image
// o = image object
function fixPng(e) {
  var caller = e.target            ||
               e.srcElement        ||
               window.event.target ||
               window.event.srcElement;
  var u = caller.src;
  var o = caller;

  if(!o || !u)
    return;

  // Detach event so is not triggered by the AlphaImageLoader
  o.detachEvent('onload', fixPng);

  // Save original sizes
  var oldw = o.clientWidth;
  var oldh = o.clientHeight;

  // Need to give it an image so we don't get the red x
  o.src          = 'images/spacer.gif';
  o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";

  // Restore original sizes
  if(o.style) {
    o.style.width  = oldw +"px";
    o.style.height = oldh +"px";
  }
}

我是否过度杀伤了它？

Ok, I'm virtually new to html/js but I think I had to change Rob Allen's answer a bit to fix two problems:

AlphaImageLoader() was changing the aspect ratio of my images so I needed to restore the original sizes AFTER the images were loaded.
fixPngs(), if called from the end of the html, was being called after the document was loaded but before all the images were loaded.

So I've changed my fixPngs() to just attach an event:

function fixPngs() {
  // Loops through all img tags
  for(i = 0; i < document.images.length; i++) {
    var u = document.images[i].src;
    var o = document.images[i];

    if(u.indexOf('.png') > 0) {
      o.attachEvent('onload', fixPng);
      o.src = u;
    }
  }
}

fixPngs() is still being called from the end of the html:

<!--[if lte IE 6]>
  <script language="javascript" type="text/javascript">
    // Do this after the page loads
    fixPngs();
  </script>
<![endif]-->

And fixPng() now fetches the caller, detaches the event, saves the original dimensions, calls AlphaImageLoader() and finally restores the dimensions:

// u = url of the image
// o = image object
function fixPng(e) {
  var caller = e.target            ||
               e.srcElement        ||
               window.event.target ||
               window.event.srcElement;
  var u = caller.src;
  var o = caller;

  if(!o || !u)
    return;

  // Detach event so is not triggered by the AlphaImageLoader
  o.detachEvent('onload', fixPng);

  // Save original sizes
  var oldw = o.clientWidth;
  var oldh = o.clientHeight;

  // Need to give it an image so we don't get the red x
  o.src          = 'images/spacer.gif';
  o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";

  // Restore original sizes
  if(o.style) {
    o.style.width  = oldw +"px";
    o.style.height = oldh +"px";
  }
}

Have I overkilled it?

回复收藏 0 原文

~没有更多了~