Html 如何仅使用CSS将播放按钮覆盖在缩略图上

我创建了这个简单的html、css代码，将播放按钮覆盖在缩略图上。除了按钮位于黑色背景后面外，所有操作都非常完美：

我就快到了，但是为了让这个CSS风格完美，我需要白色的播放按钮位于黑色背景之上。怎么做

<ul class="thumb">
  <li>
    <div class="overlay">
         <a href="#"><img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""></a>
         <span class="time">3:28</span>
         <a href="#" class="playWrapper">
            <span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>
         </a>
    </div>
    <div class="thumbCaption"><a href="">This is the description of the video...</a></div>
  </li>
</ul>

---

这是一个简单的解决方案

替换这个

.thumb .overlay:hover .playWrapper {
    opacity: .6;
}


.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-color: rgba(0, 0, 0, 1);
}

与

---

播放按钮似乎在后面的原因是容器是透明的。
使容器完全可见

opacity:1

，并使用rgba格式添加背景（

rgba（0,0,0,0.6）

）。

您也不需要那么多容器。
这里有两种方法：

JSfiddle-

.thumb{
显示器：flex；
柔性包装：包装；
列表样式：无；
}
李大拇指先生{
宽度：193px；
}
.大拇指李~李{
左边距：20px；
}
.拇指.拇指说明{
填充：10px0；
}
.覆盖{
位置：相对位置；
}
.覆盖.缩略图{
显示：块；
}
.时间{
位置：绝对；z指数：2；
右侧：3px；底部：3px；
填充物：2px 5px；
背景色：rgba（0,0,0,0.6）；
颜色：白色；
}
.overlay.playWrapper{
不透明度：0；
位置：绝对；z指数：1；
排名：0；
宽度：192px；高度：109px；
背景：rgba（0,0,0,0.6）url（“http://wptf.com/wp-content/uploads/2014/05/play-button.png）无重复滚动中心/50px 50px；
}
.playWrapper.playBtn{
位置：绝对；z指数：2；
宽度：50px；高度：50px；
左侧：0；右侧：0；顶部：0；底部：0；边距：自动；/*居中*/
}
.thumb.overlay:hover.playWrapper{
不透明度：1；
}

3:28


12:10

我将图像从HTML移动到CSS中

.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-image: url("http://wptf.com/wp-content/uploads/2014/05/play-button.png");
  background-size: 50px 50px;
  background-position: center; 
  background-repeat: no-repeat;
  background-color: black;
}

现在可以从中删除“”

---

我不确定您是否要求更改

.overlay.playWrapper{背景色：#FFF；}

@MZaragoza我需要圆形播放按钮位于.playWrapper的顶部。我不能让它在上面。如果你注意到，播放按钮有点褪色。。。

.thumb .overlay:hover .playWrapper {
        opacity: 1;
    }
.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-color: rgba(0, 0, 0, .5);
}

.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-image: url("http://wptf.com/wp-content/uploads/2014/05/play-button.png");
  background-size: 50px 50px;
  background-position: center; 
  background-repeat: no-repeat;
  background-color: black;
}