Question

我在<img>代码中有一个<a>标记：

<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适合其父级（只要{ {1}}设置为a，因为它通常是内联元素，因此它不会展开以包含display: block，它提供了叠加的大小。）

请参阅此小提琴以获取示例（将鼠标悬停在叠加div上显示以下内容）：http://jsfiddle.net/wz7mx/3/

请注意，无需显式设置z-index。

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

2 个答案: