html视频显示小图标,html – 如何在视频缩略图上叠加播放按钮？

您可以在.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