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

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

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