如何在标签上重叠CSS背景<img>？

Question

我在<a>标签中有一个<img>标签：

<a href="urlPage" class="contain-video">
  <img src="urlImage" />
</a>

<a>标签具有"包含视频"类，因此我想在实际图像上重叠背景图像：

//css file
.contain-video img {
    background: url('images/contain-video.png') no-repeat !important;
    z-index: 1;
}

但不显示背景图像。知道如何实现它吗？

Answer 1

要在子元素上重叠元素，仅使用 css，可以使用伪元素:before或:after

http://jsfiddle.net/LpkwH/2/

.image-link {
    position: relative;
    display: inline-block;
    padding: 0;   
    margin: 10px;
}
.contain-video:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(http://www.labiennale.org/img/play_icon.png);
}

.HTML：

<a href="urlPage" class="image-link">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxrvTJX_MbF6LInvYHSMteauE-NBolAQjBT82zVuLFqECGmut67A" />

<a href="urlPage" class="image-link contain-video">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxrvTJX_MbF6LInvYHSMteauE-NBolAQjBT82zVuLFqECGmut67A" />

Answer 2

您可以在锚标记内提供一个带有图像背景的叠加div，标签position: relative，内部div position: absolute，并使内部div 适合其父级（只要a设置为 display: block ，因为这通常是一个内联元素，因此它不会扩展以包含img， 它为覆盖提供大小）。

有关示例，请参阅此小提琴（将鼠标悬停在覆盖div 上显示以下内容）： http://jsfiddle.net/wz7mx/3/

请注意，无需显式设置 z 索引。