在图库中叠加图像

Question

我有一个图像库，所有这些我想在图像上添加透明图像。

它实际上适用于一个图像，但我不确定在处理多个图像时如何定位透明叠加图像。我正在使用绝对定位，当使用相同的类在图库中处理多个图像时，这可能不是最佳的。

看看我的代码，或许你可以比我更好地理解它

**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;

Answer 1

只需删除top和left媒体资源，然后将显示更改为inline-block

小提琴： http://jsfiddle.net/gamehelp16/yg7fP/

您只需要确保您的图片是一排直的

Answer 2

一个简单的解决方案是在HTML中的span之后移动您的img ，并按照以下方式设置样式：

.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;
}

Here's a jsFiddle of it，来自维基共享资源的随机图片进行演示。即使图像线足够长，也可以使用此解决方案。