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

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

<div >  <div >            <a  href="/vIDeos/ID8" title="galaxy">      <img  src="/Images/vIDeo8.jpg" alt="vIDeo 8" />      <img  src="/Images/1.png" alt="" />    </a>    <a  onmouSEOver="showDuration2(this);" onmouSEOut="hIDeDuration2(this);" href="/vIDeos/ID1234"><span >51:57</span></a>  </div>  <div ><a href="/vIDeos/ID8" title="galaxy">galaxy</a></div>  <div >1 daybefore</div>  <div > 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 )/2OverlayIcontop = ( 160 - 37 ) / 2 = 61.5

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

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

总结

以上是内存溢出为你收集整理的html – 如何在视频缩略图上叠加播放按钮？全部内容，希望文章能够帮你解决html – 如何在视频缩略图上叠加播放按钮？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。