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 +不透明度工作？

回答

相關問題