IE瀏覽器中的PNG：切換不透明度以部分透明img？

Question

我有一個部分透明的PNG圖像文件。我需要切換其不透明度。

目前我使用下面的CSS代碼，允許不透明度：

filter:alpha(opacity=50);

然而，IE瀏覽器難以處理PNG的透明部分。當我嘗試通過添加下面的CSS來解決這個問題：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');

好了，這是行不通的。我的問題是：人們發現這個問題的最佳解決方案是什麼？我應該將PNG轉換爲GIF嗎？還是有更優雅的解決方案？

謝謝。

Answer 1

IE的filter風格是一個可怕的混亂。它確實允許瀏覽器做一些技巧，否則這些技巧會超出其範圍，但它是非標準的，並且存在一些主要問題。

我不能沒有你看到完整的CSS確定，但在我看來，如果你已經通過filter最大的「疑難雜症」的怪癖之一抓出來：

如果需要指定更多比一個過濾器，你必須一起指定它們。如果您單獨指定它們（如您在示例中所做的那樣），則第二個filter將覆蓋第一個，即使它們實際上執行的是完全不同的操作。這實際上與CSS樣式表的工作方式一致，但是由於filter能夠做到的範圍而與直覺相反。

您可以在單個filter樣式中指定多個過濾器，用空格分隔。

在這裏看到一個參考：http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

這種方法的問題是顯而易見的，如果你想有不同的類名的樣式表觸發不同的效果 - 因爲沒有辦法結合起來，從不同來源的過濾器進入相同的元素。

其他可能引起你注意的一個大問題是，使用progid:語法編寫的過濾器由於冒號而實際上是無效的CSS，並且足以導致一些非IE瀏覽器在整個樣式表中窒息。這可以通過使用簡寫語法（按照您的第一個示例中的alpha()篩選器），IE6和IE7或IE8與-ms-filter替代方法，使用更長的語法將整個事件括在引號中來防止。

下面是一個例子：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');" 

希望有所幫助。