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

发布时间：2020-12-14 16:35:41 所属栏目：资源来源：网络整理

导读：我有一些div缩略图.有没有办法我可以使用CSS(我的播放图标有一个类名overlayicon)将播放图标放在拇指中心的缩略图像上(我的缩略图图像的名称为Item Image)？ div class="ItemLeft" div class="Clipping" a class="ImageLink" href="/videos/id8" title="gala

我有一些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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!