您可以在.OverlayIcon上使用position:absolute.例如:
.ImageLink {
height: 300px;
width: 350px;
position: relative;
display: block;
}
.ItemImage {
height: 300px;
width: 350px;
}
.OverlayIcon {
position: absolute;
top: 40px;
left: 65px;
}
根据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