我试图将播放按钮叠加到缩略图上。
单击图像时,会出现一个灯箱,显示视频(使用Colorbox Drupal模块)。
我尝试将图像包装在一个名为" newvideo"它有我的播放按钮的背景图像。但是我似乎无法展示它!
代码
<style>
video {
max-width: 580px;
.newvideo { position: relative; }
.newvideo a {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 60px;
left: 130px;
}
.newvideo a:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}
</style>
HTML
<div style="display: none;">
<div id="id-of-content">
<video controls poster="/sites/default/files/image/crm-systems-poster_0.png">
<source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg">
<source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4">
<img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image">
</video>
</div>
</div>
<div class="newvideo">
<a class="colorbox-inline" href="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.mp4?width=580&height=330&inline=true#id-of-content">
<img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png" title="CRM System image"> </a>
</div>
有什么建议吗?
答案 0 :(得分:3)
如果将图像放置在元素中,它将位于该元素的背景上,因此,除非该图像具有透明度,否则您将无法看到背景。
实现所需内容的一种方法是在<a>
标记上使用绝对定位的伪元素,而无需任何额外的标记。
More information on pseudo elements
示例(已更新为包含:hover
州)
a{
display:inline-block;
position:relative;
}
a:after{
background:url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png) center center no-repeat;
bottom:0;
content:"";
display:block;
left:0;
position:absolute;
right:0;
top:0;
}
a:hover:after{
background-image:url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}
<a href="#"><img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png"></a>
答案 1 :(得分:0)
请你查看小提琴https://jsfiddle.net/nileshmahaja/p5Ldd3cc/
我更改了您的HTML标记并修改了CSS代码。 请仔细看看
<强> HTML:强>
<div class="newvideo">
<a class="colorbox-inline" href=""></a>
<img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png" title="CRM System image" />
</div>
<强> CSS:强>
newvideo {
position: relative;
width:320px
}
.newvideo a {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
}
.newvideo a:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}