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

他们正在使用原型（一个类似于 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 中看到蓝色轮廓）。