在圖像上設置疊加圖像

Question

我有一個半透明圖像，我想疊加在圖像上。我正在嘗試遵循HTML和CSS，但我無法獲得圖像背景，它始終保持在圖像背後。

在下面的代碼中，我試圖在li的圖像上設置.box（紅色）的背景。

HTML：

<div class="box"> 
    <div class="x"> 
    <ul> 
     <li> 
      <img src="http://farm9.staticflickr.com/8341/8283881151_aa0735d1fc.jpg" />    
     </li> 
    </ul> 
    </div> 
</div> 

CSS：

.box{ 
    background: red; 
    position: relative; 
    z-index: 2 
} 


li{ 
    position: relative; 
    z-index: 1; 
} 

Demo

Answer 1

的問題是，你的圖像方框內。因此，提高盒子的Z-索引不會將其放在圖像的頂部，因爲盒子內的所有東西都會隨之出現。

要解決此問題，請將圖像放在盒子外的單獨的div中，然後讓您可以將盒子放在盒子的上面。

更新：這定義了兩個div。 .box將在.x之上爲半透明。

.box{ 
    background: red; 
    opacity: 0.4; 
    position: absolute; 
    height: 500px; 
    width: 500px; 
    z-index: 2 
} 

.x { 
    position: absolute; 
    z-index: 1; 
} 

Jsfiddle example。

Answer 2

您需要將該框設置在與圖像相同的圖層上。

下面是一個例子：Fiddle

HTML：

<div id="container"> 
    <div id="box"></div> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" 
width=200 id="overlay"></div> 
</div>​ 

CSS：

#container { 
    position: relative; 
} 

#box { 
    position: relative; 
    display: block; 
    width: 200px; 
    height: 200px; 
    background: red; 
    z-index: 1;   
} 

#overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
}​