Dropbox如何在IE上使用透明的PNG +不透明度工作？

我在www.dropbox.com上看到，watch_a_video2.png图片是透明度设置为0.5的透明PNG图片。当您将鼠标悬停在其上时，不透明度会发生变化。Dropbox如何在IE上使用透明的PNG +不透明度工作？

他们怎么做没有围绕与IE7/8的watch_a_video2.png图像的黑色轮廓？

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

我尝试重现其与jQuery的风格和正常工作与Firefox/Safari浏览器，但我与IE浏览器黑色轮廓。

感谢您的帮助。

alt text

来源

2010-12-10 benjisail

也许我错过了一些东西，但我只是在IE7中打开这篇文章，并没有看到黑色的轮廓。编辑：啊，你的意思是黑暗的轮廓出现在鼠标悬停的时候？ :) – 2010-12-10 11:02:35

是的，通常在IE7/8中，当您在透明PNG图像上设置不透明度时，会出现黑色轮廓。但是，在dropbox.com网站上，我看不到围绕PNG图像的任何黑色轮廓。我只想知道他们如何解决IE7/8错误。 – benjisail 2010-12-10 11:33:34

他们正在使用的原型（JavaScript框架有点像jQuery）。此代码出现希望达到的效果（换言之，它们不是简单地使用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中的蓝色轮廓）。

来源

2010-12-10 12:10:32 LittleTreeX

因此，似乎解决方案是使用原型库？ – benjisail 2010-12-10 14:08:27

我不想说这是“唯一”的解决方案，但这就是dropbox.com似乎是这样做的。我尝试使用.fadeIn（）和.fadeOut（）无效的JQuery解决方案。 IE8对这些功能不太好，请看图。如果我想出其他的东西，我会编辑我的帖子。 – LittleTreeX 2010-12-10 15:03:19

Dropbox如何在IE上使用透明的PNG +不透明度工作？

回答

相关问题