我有一些div缩略图.有没有办法我可以使用CSS(我的播放图标有一个类名overlayicon)将播放图标放在拇指中心的缩略图像上(我的缩略图图像的名称为Item
Image)？
<div class="ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/id8" title="galaxy">
<img class="ItemImage" src="/Images/video8.jpg" alt="video 8" />
<img class="OverlayIcon" src="/Images/1.png" alt="" />
</a>
<a class="DurationInfo" onmouSEOver="showDuration2(this);" onmouSEOut="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
</div>
<div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div>
<div class="VideoAge">1 daybefore</div>
<div class="PlaysInfo"> broadcast 265</div>
</div>
我的css：
.Item.ItemLeft,.Item.ItemMiddle,.Item.ItemRight
{
float:left;
margin-right:15px;
}
.clear
{
clear:both;
}
img.ItemImage {
width: 18em;
height: 10em;
}
.OverlayIcon {
position: absolute;
top: 40px;
left: 65px;
}
解决方法
您可以在.OverlayIcon上使用position：absolute.例如：
.ImageLink {
height: 300px;
width: 350px;
position: relative;
display: block;
}
.ItemImage {
height: 300px;
width: 350px;
}
.OverlayIcon {
position: absolute;
top: 40px;
left: 65px;
}
工作示例：http://jsfiddle.net/shodaburp/9nEua/
根据user1788736的第一条评论进行更新
只有在所有高度相同且固定的情况下,上述解决方案才有效.然后,您需要根据playButton.png维度的高度调整顶部和左侧值.
如果你能提供一个你现在拥有的jsFiddle(html,css,jQuery),那么更容易更准确地调整定位.
根据user1788736的第二条评论进行更新
我在我的服务器上上传了一个大小相同的虚拟图像(56px x 37px).这是你小提琴的更新版本：http://jsfiddle.net/shodaburp/k6yAQ/1/
根据user1788736的第三条评论提供的额外信息
当你说“如何找到overlayicon w和h的值？”我假设您实际上在寻找.OverlayIcon的顶部和左侧值.如果我错了,请纠正我.
首先,如果您不打算在您的站点上启用缩放/放大功能,只需坚持使用px作为图像的单位测量.
根据您的jsFiddle拇指尺寸,12em x 10em相当于192px x 160px.
获取.OverlayIcon的顶部和左侧值的公式如下：
OverlayIconTop = (ItemImageHeight - OverlayIconHeight )/2 OverlayIconTop = ( 160 - 37 ) / 2 = 61.5
(舍入到61或62,因为px不能有小数)
OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2 OverlayIconLeft = ( 192 - 56 ) / 2 = 68
