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

Answer 2

尝试使用伪元素。这假设图像是100px×100px

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

z-index到背景？ CSS

4 个答案: