Css 如何将背景图像带到前面？

我正在尝试制作一个“假视频”列表，它实际上是一个带有播放图标的图像。我的想法是将播放图标设置为背景，然后使用z-index将其置于图像的前面，然而，无论我做什么，图标仍然保留在标记中的任何内容后面

这是我的代码：

HTML:

下面是一个JSFIDLE：

---

添加

位置：绝对应该可以

或者您需要的任何
位置

这是允许z-index“移动”图像的位置。
添加
位置：绝对应该可以

或者您需要的任何
位置

这是允许z-index“移动”图像的位置。
您可以使用伪元素（或另一个绝对定位的元素）来实现这一点


HTML

<ul>
    <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/>
    </li>
</ul>

您可以使用伪元素（或另一个绝对定位的元素）来实现这一点


HTML

<ul>
    <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/>
    </li>
</ul>

页面的每个部分都有z索引，通常默认为0。
所以，任何时候你想让某些东西走在前面，你都可以使用z-index:1；
任何时候你想把东西放在后面，你都可以使用z-index:-1；
假设你必须把一个图像放在另一个图像上，或者你可以使用z-index:2；或者更多
整数表示“项目”所在的层。
而且所有这些都取决于位置。在你的情况下，我会使用绝对值。
希望这有助于理解更好的分层特性
 页面的每个部分都有z索引，通常默认为0。
所以，任何时候你想让某些东西走在前面，你都可以使用z-index:1；
任何时候你想把东西放在后面，你都可以使用z-index:-1；
假设你必须把一个图像放在另一个图像上，或者你可以使用z-index:2；或者更多
整数表示“项目”所在的层。
而且所有这些都取决于位置。在你的情况下，我会使用绝对值。
希望这有助于理解更好的分层特性
 
z-index
仅适用于定位元素。只需添加
position:relative
…我担心它不会与css背景图像一起工作…您将在单独的元素中包含播放图标，无论是作为背景还是内联图像，您都可以使用z-index将该元素放置在另一个元素的顶部。@Mee关于当前解决方案不起作用的原因，请阅读我关于堆叠上下文的回答，z-index
z-index
仅适用于定位元素。只需添加
position:relative
…我担心它不会与css背景图像一起工作…您将在单独的元素中包含播放图标，无论是作为背景还是内联图像，您都可以使用z-index将该元素放置在另一个元素的顶部。@Mee关于当前解决方案不起作用的原因，在这里阅读我关于堆叠上下文和z索引的回答，我尝试了，但没有起作用。我编辑了我的帖子添加了一个JSFIDLE，请看一看。我试过了，没用。我编辑了我的帖子，添加了一个JSFIDLE，请看一下。这里只有一个问题，这将li元素并排嵌套side@FabioG. 如果为True，则
li
将是视口或父元素宽度的100%。我假设在实际的实时环境中，
li
（或父级）将有一个显式的宽度h。这里只有一个问题，这将li元素并排嵌套side@FabioG. 如果为True，则
li
将是视口或父元素宽度的100%。我假设在实际的实时环境中，
li
（或父级）将有一个显式的宽度h。
<ul>
    <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/>
    </li>
</ul>

li { 
    font-size:25px; 
    position: relative;
    display: inline-block;
}

li:before {
    position: absolute;
    content:"";
    width:100%;
    height:100%;
    background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png);
    background-repeat:no-repeat; 
    background-position: center;
    background-size: contain;

}