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中看到蓝色轮廓）。