Question

我试图将播放按钮叠加到缩略图上。

单击图像时，会出现一个灯箱，显示视频（使用Colorbox Drupal模块）。

我尝试将图像包装在一个名为＆＃34; newvideo＆＃34;它有我的播放按钮的背景图像。但是我似乎无法展示它！

代码

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

有什么建议吗？

Fidde ：http://jsfiddle.net/8ojo5m88/3/

Answer 1

如果将图像放置在元素中，它将位于该元素的背景上，因此，除非该图像具有透明度，否则您将无法看到背景。

实现所需内容的一种方法是在<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>

Answer 2

请你查看小提琴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);
}

粘贴在缩略图图像顶部的播放按钮

2 个答案: