html - 如何在视频缩略图上叠加播放按钮？

Question

我得到了一些 div 缩略图。有没有一种方法可以使用 css(我的播放图标有一个类名 overlayicon)将播放图标放在 拇指中心(我的缩略图有类名 ItemImage)的缩略图上？

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

Answer 1

您可以在 .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 尺寸的高度调整 top 和 left 值。

如果您可以提供您当前拥有的(html、css、jQuery)的 jsFiddle，那么更容易更准确地调整定位。

根据 user1788736 的第二条评论更新

我在我的服务器上上传了一张大小相同 (56px x 37px) 的虚拟图片。这是您的 fiddle 的更新版本:http://jsfiddle.net/shodaburp/k6yAQ/1/

基于 user1788736 的第三条评论的额外信息

当你说“如何找到 overlayicon w 和 h 的值？”我假设您实际上是在寻找 .OverlayIcon 的 top 和 left 值。如果我错了，请纠正我。

首先，如果您不打算在您的站点上启用缩放/放大功能，请坚持使用 px 作为图像的测量单位。

根据您的 jsFiddle 拇指尺寸，12em x 10em 等同于 192px x 160px。

获取 .OverlayIcon 的 top 和 left 值的公式如下:

OverlayIconTop = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconTop = ( 160 - 37 ) / 2 = 61.5 

(四舍五入到 61 或 62，因为 px 不能有小数)

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconLeft = ( 192 - 56 ) / 2 = 68