我正在尝试列出“假视频”，它实际上是带有播放图标的图像。我的想法是将播放图标设置为背景，然后使用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/
您可以使用伪元素（或另一个绝对定位的元素）来实现此目的。
的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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句