使用CSS实现响应式图片上的播放按钮

Question

我想在响应式图像上显示播放按钮。 按钮大小为96x96像素，需要位于图像中心。

我尝试了许多方法，但效果都不好。 我读到了一些关于flex设计的内容，也许在flex中做起来很简单？

我需要一个真正简单的方法，因为将有5到10个元素。

谢谢和问候

- Delavor

Answer 1

如果您给图像设置一个父元素，您可以将覆盖层设为该父元素的背景图像，并将其定位在父元素的中心位置。

div {
  display: inline-block;
  position: relative;
}
img {
  max-width: 100%;
}
div:after {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 96px;
  height: 96px;
  background: url('https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg');
  background-size: cover;
  content: '';
}

<div>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

以下是同样的技术，但使用了覆盖层作为父元素中的img。

div {
  display: inline-block;
  position: relative;
}
img {
  max-width: 100%;
}
.thumb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 96px;
  height: 96px;
}

<div>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <img src="https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg" class="thumb">
</div>

- Michael Coker

---

非常棒！非常感谢你，我的朋友！ :) - Delavor

Answer 2

将您的图像放入一个相对容器中，将播放按钮设置为绝对定位。就像这样：

<div class="videoContainer">
   <img src="link_to_your_image" alt="">
   <img src="link_to_play_button" alt="play" class="playBtn">
</div>

以及CSS：

.videoContainer {
    position: relative;
}
.playBtn {
    position: absolute;
    width: 96px;
    height: 96px;
    left: 50%;
    top: 50%;
    margin-left: -48px; /*half of the width */
    margin-top: -48px; /*half of the height */
}

- pgrab86

---

如果您能提供一个实时状态的fiddle链接或片段链接，那就太棒了！ - Umair Shah Yousafzai