0

我有一个半透明的图像，我想覆盖在图像上。我正在尝试遵循 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;
}

演示

4

2 回答 2

1

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

这是一个例子：小提琴

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;
}​
于 2012-12-19T11:18:54.913 回答
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 示例。

于 2012-12-19T11:12:18.273 回答