如何解決不透明問題？

-2

我的理解是，當不透明度應用於div時，計算機在所有其他div（或圖層）的頂部（或表面級別）上呈現該div。如何解決不透明問題？

說到這裏，我試圖把4個不同的div放在彼此之上。每個div都有不同的z-索引，這樣它們就會一層層堆疊在一起。如果我關於不透明度的陳述是真實的，那麼任何含有不透明度的圖層都將被迫置於頂部 - 使整個圖片具有不透明的質量。

我的問題是：有沒有一種方法來欺騙計算機渲染不透明，沒有不透明的質量？

這裏是我的HTML：

<div id="wrapper"> 

<div id="subWrapper1"> 
    <div id="cyan"> 
     <img src="images/cyanObama.png" alt="Cyan Version" /> 
    </div> 

    <div id="magenta"> 
     <img src="images/magentaObama.png" alt="magenta version" /> 
    </div> 
</div> 

<div id="subWrapper2"> 
    <div id="yellow"> 
     <img src="images/yellowObama.png" alt="yellow version" /> 
    </div> 

    <div id="black"> 
     <img src="images/blackObama.png" alt="black version" /> 
    </div> 
</div> 

</div>

這裏是CSS：

#subWrapper1{position: relative; 
    display: block;} 

#subWrapper2{margin-top: 262px; 
    position: relative; 
    display: block;} 

#cyan{width: 555px; 
    height: 555px; 
    margin: 0; 
    position: relative; 
    display: inline-block; 
    z-index: 10;} 

#magenta{width: 555px; 
    height: 555px; 
    position: relative; 
    display: inline-block; 
    opacity: .7;} 

#yellow{width: 555px; 
    height: 555px; 
    position: relative; 
    display: inline-block; 
    z-index: 20; 
    opacity: .5;} 

#black{ 
    width: 555px; 
    height: 555px; 
    position: relative; 
    display: inline-block; 
    z-index: 30;}

這裏是一個的jsfiddle：http://jsfiddle.net/hz2xy/1/

感謝您的幫助。

來源

2013-09-23 justLearning

http://jsfiddle.net/wbDS9/2/，鍍鉻的股利與不透明測試這仍是呈現下面的一個沒有透明度。 –

這是我想要做的。我正在採用CYMK模式，並將這四個頻道的動畫製作在一個位置。有用;然而，我需要用不透明度來調整每個顏色通道，而當我這樣做時 - 顏色會變得模糊不清。 – justLearning

我已經添加了一個JSFiddle向您展示。 – justLearning