css - 将一张图片放在另一张图片中，并使用CSS保持在中心

我尝试将重叠的“播放”按钮保留在每个分辨率显示屏上另一张图片的确切中心。

我最好的结果是：

.posForHover {
  position: relative;
}

.posForHover:hover .btnPlayHover {
  opacity: 1 !important;
}

.opaShadSelect:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.btnPlayHover {
  opacity: 0;
  position: absolute;
  top: 24%;
  left: 34%;
  background: url(https://image.noelshack.com/fichiers/2018/03/4/1516308587-
 video-play-icon.png) center;
  background-size: cover;
  height: 172px !important;
  width: 172px;
  color: white;
}

<div class="col-lg-12">
  <a class="" href="#">
    <div class="posForHover">
      <img class="img-responsive img-rounded opaShadSelect" src="https://i.ytimg.com/vi/J3kd6y6e1mg/maxresdefault.jpg">
      <span class=" btnPlayHover"></span>
    </div>
  </a>
</div>

但是当我切换到显示分辨率时并不完美

在https://jsfiddle.net/DTcHh/41899/上测试

有人可以帮我吗？

最佳答案

使用transform和position:absolute组合将按钮垂直和水平居中

.posForHover {
  position: relative;
}
img{display:block;max-width:100%;}
.posForHover:hover .btnPlayHover {
  opacity: 1 !important;
}

.opaShadSelect:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.btnPlayHover {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(https://image.noelshack.com/fichiers/2018/03/4/1516308587-video-play-icon.png) center;
  background-size: cover;
  height: 172px !important;
  width: 172px;
  color: white;
  transform: translate(-50%, -50%);
}

<div class="col-lg-12">
  <a class="" href="#">
    <div class="posForHover">
      <img class="img-responsive img-rounded opaShadSelect" src=" https://i.ytimg.com/vi/J3kd6y6e1mg/maxresdefault.jpg">
      <span class="btnPlayHover"></span>
    </div>
  </a>
</div>

关于css - 将一张图片放在另一张图片中，并使用CSS保持在中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48330376/