Html 在图像上设置覆盖图像

我有一个半透明的图像，我想覆盖在图像上。我试着使用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>

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


li{
    position: relative;
    z-index: 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;
}

---

.

您需要将框设置在与图像相同的层上

以下是一个例子：

HTML:

---

我不认为这回答了这个问题：“我正试图在li中的图像上设置.box（红色）的背景。”Thx用于下一票。。。当然，它回答了这个问题。它显示了同一层上的两个容器使用z索引将一个容器放置在另一个容器上的示例。。

 <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>​

#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;
}​