使用 css 在响应式图像上播放按钮

Question

我正在尝试在响应式图像上显示播放按钮。按钮的尺寸为 96x96px，并且需要位于图像的中心。

我尝试了很多方法但总是不好。我读过一些关于 Flex 设计的内容，也许在 Flex 中做起来很简单？

我需要非常简单的方法，因为会有 5 到 10 个元素。

感谢致敬

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>