Html 如何在视频缩略图上覆盖播放按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15539729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay a play button over a video thumbnail image?
提问by user1788736
I got some div thumbnail images. is there a way i can place the play icon over the thumbnail image just in the center of thumbs(my thumbnail images has class name of ItemImage) using css (my play icon has a class name overlayicon)?
我得到了一些 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>
my css:
我的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;
}
采纳答案by kyooriouskoala
You can use position: absoluteon your .OverlayIcon. For example:
您可以position: absolute在您的.OverlayIcon. 例如：
.ImageLink {
height: 300px;
width: 350px;
position: relative;
display: block;
}
.ItemImage {
height: 300px;
width: 350px;
}
.OverlayIcon {
position: absolute;
top: 40px;
left: 65px;
}
Working example: http://jsfiddle.net/shodaburp/9nEua/
工作示例：http: //jsfiddle.net/shodaburp/9nEua/
Update based on user1788736's first comment
根据 user1788736 的第一条评论更新
The above solution only works if all the heights are the same and fixed. You'd then need to adjust the topand leftvalues based on the height of your playButton.png dimension.
上述解决方案仅适用于所有高度相同且固定的情况。然后，您需要根据 playButton.png 尺寸的高度调整top和left值。
If you could provide a jsFiddle of what you currently have (html, css, jQuery) then it's easier to adjust the positioning more accurately.
如果您可以提供当前拥有的 jsFiddle（html、css、jQuery），那么更准确地调整定位会更容易。
Update based on user1788736's second comment
根据 user1788736 的第二条评论更新
I uploaded a dummy image on my server that has the same size (56px x 37px). Here's the updated version of your fiddle: http://jsfiddle.net/shodaburp/k6yAQ/1/
我在我的服务器上上传了一个具有相同大小 (56px x 37px) 的虚拟图像。这是您的小提琴的更新版本：http: //jsfiddle.net/shodaburp/k6yAQ/1/
Extra info based on user1788736's third comment
基于 user1788736 的第三条评论的额外信息
When you say "how to find values for overlayicon w and h?" I assume you are actually looking for topand leftvalue for .OverlayIcon. Do correct me if I'm wrong.
当你说“如何为overlayicon w 和h 找到值？” 我想你实际上是在寻找top和left的值.OverlayIcon。如果我错了，请纠正我。
First of all, if you don't intend to have a function on your site that enables zooming/enlargment, just stick with pxas unit measurement for images.
首先，如果您不打算在您的网站上使用启用缩放/放大的功能，只需坚持使用px图像的单位度量。
Based on your jsFiddle thumb dimension, 12em x 10emis equivalent to 192px x 160px.
根据您的 jsFiddle 拇指尺寸，12em x 10em相当于192px x 160px.
The formula to get the topand leftvalues for .OverlayIconis as follows:
获取top和left值的公式.OverlayIcon如下：
OverlayIconTop = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconTop = ( 160 - 37 ) / 2 = 61.5
(Round to 61 or 62 since we can't have decimal for px)
（四舍五入为 61 或 62，因为我们不能为 px 设置小数）
OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconLeft = ( 192 - 56 ) / 2 = 68
回答by cristian camilo cede?o gallego
.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;
}
[Working example using svg]http://jsfiddle.net/4L2xea4u/
[使用 svg 的工作示例] http://jsfiddle.net/4L2xea4u/
回答by Naveen Narale
You can make the thumbnail image as the background and then have the play button image over it, you can also define the a attribute as a block and make the entire area clickable.
您可以将缩略图作为背景，然后在其上放置播放按钮图像，您还可以将 a 属性定义为块并使整个区域可点击。
