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

rjee0c15 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(232)

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

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

<a>标签有“contain-video”类，所以我想在实际图像上叠加一个背景图像：

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

但未示出背景图像。你知道如何实现它吗？

css

来源：https://stackoverflow.com/questions/21118945/how-to-overlap-a-css-background-over-an-img-tag

2条答案

按热度按时间

wnrlj8wa1#

要在子元素上重叠一个元素（仅使用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" />

赞(0）回复(0）举报 2023-05-08

iqxoj9l92#

您可以在锚标记内提供一个带有图像背景的覆盖div，标记为position: relative，内部div为position: absolute，并使内部div适合其父级（只要a设置为display: block，因为这通常是一个内联元素，因此它不会扩展为包含img，这将提供覆盖的大小）。
看看这个小提琴的例子（悬停在覆盖div上显示下面的内容）：http://jsfiddle.net/wz7mx/3/
注意，不需要显式地设置z索引。

赞(0）回复(0）举报 2023-05-08

我来回答

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

2条答案

相关问题

热门标签

最新问答