在引导程序中将图像放在另一个图像上

Question

如何将 play.png 图像放在 bootsrap 中的另一个图像上？水平和垂直居中。

我的代码：

echo '<div class="sidebar_youtube_box">';
        echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'">
            <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive">
            <img src="'.$host.'/images/assets/play.png" class="img-responsive play_png">

        </a>';
        echo '</div>';

Answer 1

你可以这样做。

.wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
}

<div class="wrapper">
  <img class="play" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Play-rounded-button-outline.svg/500px-Play-rounded-button-outline.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Pexels-photo-126407.jpg/320px-Pexels-photo-126407.jpg">
</div>

Answer 2

给图像position: absolute; 和它们的父图像position:relative;。然后图像将相对于父对象定位。使用top、left和transform完成定位。您还可以使用z-index 将一个放在另一个之上。请参阅下文，希望对您有所帮助。

HTML：

<div class="sidebar_youtube_box">
    <a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'">
    <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive img-stack">
    <img src="'.$host.'/images/assets/play.png" class="img-responsive img-stack play_png">  </a>
</div>

CSS：

.sidebar_youtube_box{
  position:relative;
}
.img-stack{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  z-index:1;
}
.play_png{
  z-index:2;
}