html - 如何仅使用 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;
}

Answer 1

播放按钮似乎在后面的原因是因为容器是透明的。
使容器完全可见 opacity: 1 , 并使用 rgba 格式添加背景 ( rgba(0,0,0,0.6) )。

而且你不需要那么多容器。
以下是执行此操作的 2 种方法:

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> , 正确的是你拥有它的方式。