css - 将图像定位在 CSS 中另一个现有的 `<img/>` 上

Question

我正在做一个页面，我在其中显示视频的缩略图，当您单击该缩略图时，它会弹出一个 YouTube 视频。

这个缩略图是 195x195 的简单图像，但最终客户端会按原样上传，我想通过 CSS 在视频图像上添加一个“播放图标”(与 IE7+ 兼容)。我不知道如何处理这个问题。

谁能帮帮我？

提前致谢!

Answer 1

你可能想做这样的事情:

  <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <img src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
  </div>

当然不使用style=""，而是将样式放到单独的CSS文件中。

解释:

将两张图片放入div。如果您将 position: relative; 属性赋予包装器 div，则此 div 内的任何内容都将相对于它定位。这意味着，您可以将 position: absolute; 添加到播放图像，并使用 left: XXpx; 和 top: XXpx; 可以定位它你想在哪里。您可能想使用 z-index 来定义哪张图片应该在顶部。 z-index 越高，层级越高。请注意:z-index 仅在设置了 position 时有效。