8

我得到了一些 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;
}
4

4 回答 4

5

您可以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/

根据user1788736的第一条评论更新

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

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

根据user1788736的第二条评论更新

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

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

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

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

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

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

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

（四舍五入到 61 或 62，因为我们不能为 px 设置小数）

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconLeft = ( 192 - 56 ) / 2 = 68
于 2013-03-21T05:14:04.720 回答
4 
.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/

于 2015-03-20T18:37:56.597 回答
1

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

于 2013-03-21T05:10:02.657 回答
0

我刚刚为响应式布局解决了这个问题，并遇到了这个演示，它工作得非常好。

于 2015-04-13T17:12:41.020 回答