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时有效。

Answer 2

您可以使用position：relative或position：absolute将图像放在另一个上面。

当定位绝对时，这些元素在具有相对或绝对位置的父元素中被定位为绝对，因此不会像通常认为的那样相对于页面。

我在这个小提琴中证明了这一点：

http://jsfiddle.net/W5TFS/

Answer 3

您可以创建一个将显示图像的类。

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

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

您可以尝试here。

将图像放在CSS中另一个现有的`<img/>`上

3 个答案: