在CSS中将一张图片定位在另一张已存在的`<img />`上方

Question

我正在制作一个页面，其中展示视频缩略图。当你点击缩略图时，它会弹出一个 YouTube 视频。

这些缩略图是简单的 195x195 图像，但最终客户将按原样上传它们。我想通过 CSS 在视频图像上添加一个“播放图标”（兼容 IE7+）。我不知道该如何处理。

有人可以帮帮我吗？

提前感谢您！

- udexter

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中。如果给包裹div添加position: relative;属性，则该div内部的所有内容都会相对于它定位。这意味着，您可以给播放图像添加position: absolute;，并使用left: XXpx;和top: XXpx;来定位它。您可能需要使用z-index来定义哪张图片应该在顶部。越高的z-index层级越高。请注意：z-index仅在设置了position时才起作用。

- mkk

Answer 2

你可以创建一个类来显示图片。

showPlay{
    background-image:url('play.png');
    z-index:1
}

然后您可以在需要显示它的每个图像中使用它。

您可以在这里尝试它。

- kechap

Answer 3

您可以使用position: relative或position: absolute将图像放置在其他图像之上。

当使用绝对定位时，这些元素是相对于具有相对或绝对位置的父元素进行绝对定位的，因此不像通常认为的那样相对于页面。

我在这个fiddle中演示了这一点：

http://jsfiddle.net/W5TFS/

- GolezTrol