用透明窗簾褪色背景

這是一個頗受歡迎的問題，我想。用透明窗簾褪色背景

我在尋找crossbrowser CSS黑色不透明層的解決方案。它會隱藏所有的東西。

我的例子：http://jsfiddle.net/pb9jv/。但它不是交叉瀏覽器。（IE 6+是我的屁股疼痛）。

2011-04-11 fl00r

無論如何，你依靠jQuery，所以你可以用它來擴展窗口大小的div。 IE6在「位置：絕對」拉伸技巧中表現不佳。 – kapa 2011-04-11 13:12:55

嘗試加入這個你申請到fadeover（在你的榜樣：#black）的CSS樣式

filter: alpha(opacity = 50);

編輯：您希望它是透明或不透明，如給出的例子？

2011-04-11 13:05:12 David

透明和不透明之間的區別是什麼？舉例來說，它可能是0.5不透明或50％透明 – fl00r 2011-04-11 13:08:58

@ fl00r：不透明與透明相反。 100％不透明=透明 – Marnix 2011-04-11 13:13:07

@Marnix，thx，但在我的情況下是相同的。 50％透明= 0.5不透明:) – fl00r 2011-04-11 13:14:17

使用一個簡單的div，並應用一個背景圖像與您的顏色1px大小的圖像。只是一個簡單的PNG與你的黑色。

.overlay 
{ 
    background-image:url('myoverlaycolor.png'); 
}

它會在整個div上重複自己。

編輯
試想想它，IE6不支持PNG吧？也許你可以看看像slimbox這樣的資源。

2011-04-11 13:04:10 Marnix

這是關於透明PNG在Internet Explorer中的工作 – fl00r 2011-04-11 13:06:38

大衛是正確的 - 那就是語法。但是你的小提琴在IE6中無法使用，因爲你沒有尺寸值。

這裏是一個例子： http://jsfiddle.net/4Aw4Q/ 如果你刪除了尺寸，元素將不會顯示。

2011-04-11 13:09:15 lnrbob

那麼100％的高度和100％的寬度呢？它仍然不能在IE 6中工作 – fl00r 2011-04-11 13:10:36

@Marnix如果您使用適當的過濾器IE6不支持PNG。嘗試這種對於初學者

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');

在設置上述過濾器作爲用於跨度或含有圖像，並確保寬度和圖像的高度被設定div元素的類。

設置此類也適用於包含圖像的span或div元素。

.PNGTrans img{ 
    background: transparent; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
}

所以上面的類將不得不爲包含png圖像的父級調用。

@ fl00r：擁有一個具有較高z-index的div元素，screen.width和screen.height分別作爲它的widht和height。您可以使用圖片，也可以使用不透明度過濾器進行播放。

2011-04-11 13:48:40

回答