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

Position a image over another existing `<img />` in CSS

提问by udexter

I am doing a page where I show thumbnails for videos that, when you click, it popups a YouTube video.

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

This thumbnails are simple images of 195x195 but the end client it will upload as it, and I would like to add via CSS a "play icon" over the image of the video (compatible with IE7+). I've no idea on how to handle this.

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

Can anyone help me?

谁能帮我？

Thank you in advance!

先感谢您！

回答by mkk

you might want to do something like this:

你可能想做这样的事情：

  <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>

of course do not use style="", but put styles into separate CSS files.

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

Explanation:

解释：

put two images into div. If you give position: relative;property to your wrapper div, then anything inside this div would be position relatively to it. It means, you can add position: absolute;to the play image and using left: XXpx;and top: XXpx;you can position it where you want. You might want to use z-indexto define which picture should be on the top. The higher z-indexthe higher layer. Please note: z-indexworks only if positionis set.

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

回答by GolezTrol

You can use position: relative or position: absolute to position images on top of the other.

您可以使用 position:relative 或 position: absolute 将图像定位在另一个之上。

When positioning absolute, these elements are positioned absulute within the parent element that has a relative or absolute position, so not relative to the page as is often thought.

当定位绝对时，这些元素绝对定位在具有相对或绝对位置的父元素内，因此与通常认为的相对于页面不同。

I demonstrated this in this fiddle:

我在这个小提琴中演示了这一点：

http://jsfiddle.net/W5TFS/

http://jsfiddle.net/W5TFS/

回答by kechapito

You can create a class that will show the image.

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

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

Then you can use it in every image that you need to show it.

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

You can try it here.

你可以在这里试试。