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

我正在做一个网页，显示视频的缩略图，当你点击时，它会弹出一个YouTube视频

这个缩略图是195x195的简单图像，但它将作为最终客户端上传，我想通过CSS在视频图像上添加一个“播放图标”（与IE7+兼容）。我不知道该怎么办

有人能帮我吗

---

提前谢谢你

您可能希望执行以下操作：

  <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。如果给出

位置：相对位置：绝对播放图像并使用
左：XXpx和
顶部：XXpx您可以将其定位到您想要的位置。您可能需要使用
z-index
来定义哪个图片应该位于顶部。z指数越高，层越高。请注意：
z-index
仅在设置了
position
时才起作用。
您可以使用position:relative或position:absolute将图像放置在另一个图像之上

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

我用小提琴演示了这一点：

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

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

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

你可以试试