圖層不透明

我有兩個圖層，我希望兩個圖層都混合在一起，我如何更改它們的透明度以使其上部重疊區域可以看到。圖層不透明

2011-08-14 Aussay Marshal

您需要使用z-index，position，並opacity

HTML：

<div id="layer1"></div> 
<div id="layer2"></div>

CSS：

#layer1, #layer2 { 
    position:absolute; 
    top:0; 
    left:0; 
    width:500px; 
    height:500px; 
} 

#layer1 { 
    z-index:0; 
    background-color:red; 
} 

#layer2 { 
    z-index:1; 
    background-color:blue; 
    opacity:0.5; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
}

演示：http://jsfiddle.net/AlienWebguy/QqEdb/

來源

2011-08-14 01:58:53 AlienWebguy

非常感謝，但有沒有另一種（無IE）的CSS方式來完成這項工作？ –

@Serious Ragged Hippie：這不是IE特定的或任何東西，如果它很簡單，爲什麼要犧牲兼容性？無論如何，如果你不是針對IE瀏覽器，使用我的代碼：D – Ryan

您需要使用CSS，並使用opacity標籤。它需要一些工作，因爲舊版本的IE需要非標準的設置，但是這是一個例子：

.transparentLayer { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 
    filter: alpha(opacity=50);     // IE7 or older 
    opacity: 0.5; // all real browsers 
}

更改0.5或50是你想要的（0 =透明，1不透明度數量/ 100 =固體）。

來源

2011-08-14 01:59:46 OverZealous

謝謝OverZealous +1 –

因爲你沒有足夠的積分來實際使用'+ 1'，所以我會給OZ +1;） – AlienWebguy

根據要實現的效果，使用CSS3 opacity屬性或rgba或hsla表示法來表示元素的背景顏色。見：http://jsfiddle.net/minitech/sN8uU/

來源

2011-08-14 02:03:53 Ryan

好把一個'過濾器：alpha（opacity = 50）;'放在'div：last-of-type'選擇器中，這樣M $永遠不會看到過濾器;} – AlienWebguy

@Alien拖動IE''）' –

哈哈只是給你難兄難弟:) – AlienWebguy

回答

相關問題