Question

我创建了这个简单的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>

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)）。

此外，您不需要这么多容器这有两种方法：

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>的播放按钮，右侧是您拥有它的方式。

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

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” http://wptf.com/wp-content/uploads/2014/05/play-button.png

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

3 个答案: