Html 在画廊中叠加图像

我有一个画廊的图像，所有这些我想添加一个透明的图像顶部的图像

事实上，它确实适用于一个图像，但我不确定在处理多个图像时如何定位我的透明覆盖图像。我使用的是绝对定位，当使用同一类在图库中处理多个图像时，绝对定位可能不是最优的

看看我的代码，也许你能比我更好地理解它

**css**

    .related-videos{
position:relative;  
}

.related-videos img{
width: 100px; 
height: 100px;
}


.related-videos span{
width:100px;
height:100px;
display: block;
    position:absolute;
    top: 0;
    left: 0;
background: url('../thumbs/overlay.png') no-repeat;
}

带有一个图像的html

<div class="related-videos">
<h3>Related Videos</h3>
<span></span>
<img src=".jpg" />
</div>

相关视频

我目前无法解决几个图像的问题

<div class="related-videos">
<h3>Related Videos</h3>
<span></span>
<img src=".jpg" />
<span></span>
<img src=".jpg" />
<span></span>
<img src=".jpg" />

</div>


.related-videos{
position:relative;  
}

.related-videos img{
width: 100px; 
height: 100px;
}


 .related-videos span{
width:100px;
height:100px;
display: inline;
background: url('../thumbs/overlay.png') no-repeat;

相关视频
.相关视频{
位置：相对位置；
}
.相关视频img{
宽度：100px；
高度：100px；
}
.相关视频{
宽度：100px；
高度：100px；
显示：内联；
背景：url（'../thumbs/overlay.png'）不重复；

一个简单的解决方案是将您的

span

s移动到HTML中的

img

s之后，并将其样式如下：

.related-videos span { width: 100px; height: 100px; display: inline-block; margin-left: -100px; background: url('../thumbs/overlay.png') no-repeat; } .related-videos img { width: 100px; height: 100px; } .相关视频{ 宽度：100px； 高度：100px； 显示：内联块； 左边距：-100px； 背景：url（'../thumbs/overlay.png'）不重复； } .相关视频img{ 宽度：100px； 高度：100px； }

---

，使用Wikimedia Commons中的随机图像进行演示。即使图像行足够长，也可以使用此解决方案。

只需删除

顶部

和

左侧

属性，并将显示更改为

内联块

小提琴：

你只需要确保你的图像是在一个直线行