html - Dropbox 如何使他们的透明 PNG + 不透明度在 IE 上工作？

Question

我在 www.dropbox.com 上看到 watch_a_video2.png 图像是透明的 PNG 图像，不透明度设置为 0.5。当您将鼠标悬停在它上面时，不透明度会发生变化。

他们是怎么做到在 IE7/8 的 watch_a_video2.png 图像周围没有黑色轮廓的？

我没有看到任何过滤器或特定的 IE 修复库...

我尝试用 Jquery 重现他们的风格，它在 Firefox/Safari 上运行良好，但在 IE 上我得到一个黑色轮廓。

感谢您的帮助。

Answer 1

他们正在使用原型(prototype)(一种类似于 JQuery 的 JavaScript 框架)。这段代码似乎达到了效果(换句话说他们不是简单地使用css):

document.observe("dom:loaded", function () { 

    var play_link = $("playvideo");

    play_link.observe("mouseover", function () {
        new Effect.Opacity(play_link.down("img"), { duration: 0.2, to: 1.0 });
    });

    play_link.observe("mouseout", function () {
        new Effect.Opacity(play_link.down("img"), { duration: 0.2,  to: 0.5 });
    })


    if (!FlashDetect.versionAtLeast(9)) {
        $("has_flash").hide();
        $("no_flash").show();
    }
});

此代码适用的 HTML:

<a href="#" id="playvideo" onclick="play_screencast(); return false;">
    <img src="images/watch_a_video2.png"  alt="Watch a video about Dropbox."/><br />
    Watch a Video
</a>

您可能还必须在 css 中设置类似的内容:

a {text-decoration:none;}
img { border:none;}
/* of course you'd probably want to use a class or id on these elements */

上面的 css 将从链接中删除下划线，并从图像中删除边框。

最后，如果您可以发布您的实际代码，它可能会有所帮助(我无法在 IE8 中看到蓝色轮廓)。