Internet Explorer上的褪色圖像透明度

我正在使用一些JavaScript用於淡化圖像：從一個圖像逐漸淡出的圖像庫。圖像也可以覆蓋標題。標題背後的圖像將會稍微淡出，這樣的標題可以更清楚看出：Internet Explorer上的褪色圖像透明度

background: #fff; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */ 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); /* Older IEs */ 
opacity: 0.75; /* Real browsers */

在Internet Explorer，但是，你看下一張圖片標題後面。這並不理想。 Demo。

看到這裏（screengrab），其中標題下下圖顯示了通過：

Next image fading through under caption.

注：這個問題是出現在IE7，IE8和IE8中模擬IE7。據我所知，即使在IE9被用來模擬以前版本的IE時，IE9也沒有看到。模擬器顯然不完美。

來源

2011-05-23 TRiG

另外注意它有助於說什麼版本的IE瀏覽器，現在只有4個在野外。 – epascarello 2011-05-23 11:13:48

我在IE7和8中看到過它。我想在IE6中沒有更好的，但我沒有檢查。看一看演示。 – TRiG 2011-05-23 11:44:34

@TRiG - 我已經看過在IE7，IE8，IE9和Firefox 3.6中的演示，他們都看起來完全一樣，就我所見。標題後面的圖像與當前顯示在屏幕上的圖像相同。我不認爲你可以包含一個圖像顯示你的結局問題？ – 2011-05-23 11:56:19

IE無法處理opacity屬性。你需要使用一個黑客：

background: #fff; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */ 
filter: alpha(opacity=75); /* older IEs */ 
opacity: 0.75; /* modern browsers */

注意，這些過濾器使用範圍從0到100，而不是0.0至1.0。像jQuery這樣的框架可以爲你做到這一點，如果你動態地分配樣式，這非常方便。

來源

2011-05-23 11:05:19 jwueller

@elusive - filter：alpha（...）適用於IE8及更高版本，因此您不需要-ms-filter屬性。或者-ms-過濾器做了些什麼特別的事情？ – 2011-05-23 11:35:40

@My Head Hurts：這是解決Quirksmode和兼容模式中的一些問題的解決方法。您應該添加它以保證安全。這裏的順序也很重要。 – jwueller 2011-05-23 11:42:46

我其實也有這兩個。我沒有把完整的CSS放在問題上是愚蠢的。我會添加它。看一看演示。 – TRiG 2011-05-23 11:45:40

Internet Explorer上的褪色圖像透明度

回答

相關問題