html - 在图像上设置叠加图像

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-index 不会将其置于图像之上，因为框内的所有内容都随之而来。

要解决此问题，请将图像放在框外的单独 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 .