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

Question

我正在尝试制作一个"虚假视频"列表,这实际上是一个带有播放图标的图像.我的想法是将播放图标设置为背景,然后使用z-index将其置于图像的前面,但是,无论我做什么,图标仍然留在标签内的任何内容后面.

这是我的代码:

HTML:

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

CSS:

li { 
    font-size:25px; 
    background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png);
    background-repeat:no-repeat;
    z-index:99999;
}

这是一个jsfiddle:http: //jsfiddle.net/ZNeFu/

Answer 1

您可以使用伪元素(或另一个绝对定位的元素)来实现此目的.

JSFiddle演示

HTML

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

CSS

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;

}