1

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

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

看看我的代码，也许你能比我更懂

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

2 回答 2

2

只需简单地删除topandleft属性并将显示更改为inline-block

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

您只需要确保您的图像在一行中

于 2012-12-25T13:55:47.510 回答
1

一个简单的解决方案是将您的 s 移动到 HTML 中的spans之后img，并像这样设置它们的样式：

.related-videos 跨度{
    宽度：100px；
    高度：100px；
    显示：内联块；
    左边距：-100px；
    背景：url('../thumbs/overlay.png') 不重复；
}
.related-videos img {
    宽度：100px；
    高度：100px；
}

这是它的 jsFiddle，其中包含来自 Wikimedia Commons 的随机图像用于演示。即使图像行足够长可以换行，此解决方案也有效。

于 2012-12-25T13:52:30.173 回答