如何使用纯CSS在缩略图上叠加播放按钮

Question

我已经创建了一个简单的html、css代码，可以在缩略图上覆盖一个播放按钮。所有功能都很完美，除了按钮位于深色背景之后: https://jsfiddle.net/72r62kzy/20/ 我接近成功了，但为了使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>

CSS

.thumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.thumb li {
  width: 193px;
}

.thumb li ~ li {
  margin-left: 20px;
}

.thumb .thumbCaption {
  padding: 10px 0;
}

.overlay {
  position: relative;
}

.overlay .thumbnail {
  display: block;
}

.overlay .time {
  position: absolute; z-index: 2;
  right: 3px; bottom: 3px;
  padding: 2px 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
}

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

.playWrapper .playBtn {
  position: absolute; z-index: 2;
  width: 50px; height: 50px;
  left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* center */
}

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

- Marco

---

我不确定您是否要更改.overlay .playWrapper { background-color: #FFF; }。 - MZaragoza

@MZaragoza 我需要圆形播放按钮位于.playWrapper的顶部。我无法让它置于顶部。如果您注意到，播放按钮有点模糊... - Marco

Answer 1

播放按钮看起来在后面的原因是容器是透明的。
让容器完全可见 opacity: 1，使用rgba格式添加背景色 (rgba(0,0,0,0.6))。
此外，您不需要这么多容器。
以下是两种方法：
JSfiddle - jsfiddle.net/72r62kzy/21

.thumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.thumb li {
  width: 193px;
}

.thumb li ~ li {
  margin-left: 20px;
}

.thumb .thumbCaption {
  padding: 10px 0;
}

.overlay {
  position: relative;
}

.overlay .thumbnail {
  display: block;
}

.overlay .time {
  position: absolute; z-index: 2;
  right: 3px; bottom: 3px;
  padding: 2px 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
}

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

.playWrapper .playBtn {
  position: absolute; z-index: 2;
  width: 50px; height: 50px;
  left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* center */
}

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

<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>
  <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">12:10</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="">description goes here...</a></div>
  </li>
</ul>

左侧缩略图只需一个容器<a>即可添加播放按钮，而右侧则是您现有的方式。

- pol

Answer 2

这是一个简单的解决方案。

在此处替换

.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);
}

使用

.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);
}

- Rahul

Answer 3

我将图像从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;
}

现在你可以从中删除'http://wptf.com/wp-content/uploads/2014/05/play-button.png'

- MZaragoza