Question

我有一个半透明的图像，我想叠加在图像上。我正在尝试使用HTML和CSS，但我无法获得图像背景，它总是留在图像后面。

在以下代码中，我尝试在.box的图片上设置li（红色）的背景。

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

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

在图像上设置叠加图像

2 个答案: