html - z-index 到背景？CSS

Question

我有几个具有指定高度和宽度的列表项，其背景具有中间部分透明的边框。每个 li 包含一个图像。

<ul id="reel">
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
</ul>

CSS：

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { z-index:98; }

我希望 li 的背景出现在图像上。z-index，对我没有用。有什么建议吗？

Answer 1

我建议使用绝对位置和 x 和 y 值在负 100 或更多的 li 图像，因为您需要它来保持 li 图像远离，以便显示背景图像。如下所示：

#reel li { width:320px; height:327px; z-index:100; }
#reel li img { position:absolute; left: -100px; top: -100px; }

Answer 2

尝试一个伪元素。这假定图像是 100 像素 x 100 像素

li {               
    display:block;
    position:relative;
    height:100px;
    width:100px;
}

li:after {
    content:"";
    width:100px;
    height:100px;
    background-color:#000;
    display:inline-block;
    position:absolute;
    left:0;
    top:0;
    background: rgba(0, 0, 0, 0.6);
}

Answer 3

尼古拉斯，

我认为您尝试做的事情在代码中是错误的。

试试这样的 http://pastebin.com/7AnSxcEh

给 li 和 div 赋予相同的高度和宽度。还要添加一个定位。以便您可以堆叠订单。

Answer 4

好吧，我似乎找到了解决这个问题的方法，

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; position:relative;  }
#reel li img { position:absolute; z-index:98; }

谢谢@adrian