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

您可以在position: absolute上使用.OverlayIcon。例如：

.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/

根据用户1788736的第一条评论进行更新

上述解决方案仅适用于所有高度相同且已修复的情况。然后，您需要根据playButton.png维度的高度调整top和left值。

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

根据用户1788736的第二条评论进行更新

我在我的服务器上上传了一个大小相同的虚拟图像（56px x 37px）。这是你的小提琴的更新版本：http://jsfiddle.net/shodaburp/k6yAQ/1/

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

当您说“如何找到叠加图像w和h的值？”时我假设您实际上在为top寻找left和.OverlayIcon值。如果我错了，请纠正我。

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

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

获取top的{{1}}和left值的公式如下：

.OverlayIcon

（舍入到61或62，因为px不能有小数）

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

Answer 2

.container{
   position: relative;
   width: 200px;
}

.container img{
   width: 200px;
}

.container .play-icon{
  cursor: pointer;
  position: absolute;
  top : 50%;
  left : 50%;
  transform: translate(-50%, -50%);
}

svg:hover #play-svg{
  fill: #CC181E;
}

[使用svg的工作示例] http://jsfiddle.net/4L2xea4u/

Answer 3

您可以将缩略图图像作为背景，然后在其上放置播放按钮图像，您还可以将a属性定义为块，并使整个区域可单击。

Answer 4

我刚刚针对响应式布局解决了这个问题，遇到了this demo并且效果非常好。

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

4 个答案: