【问题标题】:Apply the AlphaImageLoader for transparent PNGs in IE6在 IE6 中为透明 PNG 应用 AlphaImageLoader
【发布时间】:2010-07-08 20:24:43
【问题描述】:

我一直在尝试让 AlphaImageLoader 在 IE6 中与我的 s 一起工作。

我尝试的解决方案之一建议应用 AlphaImageLoader,然后应用 Opacity(0)。这实际上会将透明 png 放在背景中并使原始 png 消失。当我尝试这个时,图像就消失了。省略不透明度过滤器没有任何效果,并且 png 仍然不透明。请来人帮忙?

                                                    <img id="NavBox_topLeft.png" src="#" width="17" height="34"  class="png summaryimgsrc1"

style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../1.75/commondata/sharedimages/summary/NavBox_topLeft.png', sizingMethod='scale');"/>
    </td>

我正在标记中尝试这个来测试。 Ultimatley 它将与 JS 一起添加。

谢谢

【问题讨论】:

    标签: javascript css filter internet-explorer-6


    【解决方案1】:

    试试这个:

    // Transparent PNG for IE
    // http://vbence.web.elte.hu/ie_png_alpha.html
    
    function alphaFixIE() {
        var s, i, j;
    
        // IMG
        var els = document.getElementsByTagName("IMG");
        for (i=0; i<els.length; i++) {
            s = els[i].src;
            if (s.toLowerCase().indexOf(".png") != -1) {
                els[i].src = "spacer.gif";
                els[i].style.filter += "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + s + "', sizingMethod=image);";
            }
        }
    
        // CSS: background
        for (i=0; i<document.styleSheets.length; i++) {
            var pos = document.styleSheets[i].href.lastIndexOf("/");
            var cssDir = (pos != -1) ? document.styleSheets[i].href.substring(0, pos + 1) : "";
            for (j=0; j<document.styleSheets[i].rules.length; j++) {
                var style = document.styleSheets[i].rules[j].style;
                if (style.backgroundImage.toLowerCase().indexOf(".png") != -1) {
                    var filename = style.backgroundImage.substring(4, style.backgroundImage.length - 1);
                    if (filename.indexOf("http://") != 0 && filename.indexOf("/") != 0)
                        filename = cssDir + filename;
                    style.backgroundImage = "none";
                    style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + filename + "', sizingMethod='crop');";
                }
            }
        }
    }
    
    if (navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Windows") != -1)
        window.attachEvent("onload", alphaFixIE);
    

    注意:不要忘记在同一目录中添加spacer.gif

    (也许浏览器/特征检测部分可以改进一点,但可以)

    【讨论】:

    • 老兄..你摇滚。这基本上就是我所拥有的,但我认为我错误地使用了 sizingMethod 参数。 sizingMethod='image' 设置为 'scale' 所以我所有的背景都可以工作,但图像却没有。我必须在上面的脚本中添加的唯一内容是: $(".curvepanel,.prescriptionheader,.navHeader").css("background-image", "none");我发现有必要将 background-image 设置为 none 以查看 png 背后的底层背景。非常感谢。
    【解决方案2】:

    已经有数百个脚本可以为您执行此操作。

    试试这个: http://www.dillerdesign.com/experiment/DD_belatedPNG/

    【讨论】:

    • 我还没有找到一个有效的。有些适用于背景图像,而不适用于 imgs 等。我也会看看这个。
    猜你喜欢
    • 2010-10-01
    • 2010-10-16
    • 1970-01-01
    • 2010-09-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-31
    • 2011-09-19
    相关资源
    最近更新 更多