背景的Z轴索引？CSS
背景的Z轴索引？CSS
提问于 2012-08-07 13:08:56
我有几个列表项，具有指定的高度和宽度，其背景具有中间部分透明的边框。每个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对我来说没什么用。有什么建议吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-08-07 13:42:18
尝试一个伪元素。假设图像为100px x 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);
}Stack Overflow用户
发布于 2012-08-07 13:34:38
我建议使用绝对位置和x和y值为负100或更大的li图像，因为您需要它使li图像远离，以便显示背景图像。如下所示：
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { position:absolute; left: -100px; top: -100px; }Stack Overflow用户
发布于 2012-08-07 13:31:18
尼古拉斯
我认为你想做的事情在代码中是错误的。
试试下面这样的http://pastebin.com/7AnSxcEh
为li和div赋予相同的高度和宽度。还要添加一个定位。这样你就可以把订单堆叠起来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11839594
复制相关文章
相似问题
腾讯云开发者
