在CSS中将图像定位到另一个现有的< img />` [英] Position a image over another existing `<img />` in CSS

问题描述

我在一个页面上显示视频的缩略图，当您点击时，会弹出一个YouTube视频。

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

任何人都可以帮助我吗？

解决方案

您可能想这样做：

 < div class =imageWrapperstyle =position：relative; width：195px; height：195px;> 
< img src =/ path / to / image.jpgalt = .. width = .. height = .. style =position：relative; z-index：1; /> 
< img src =/ path / to / play.jpgalt = .. width = .. height = .. style =position：absolute; left：80px; top：80px; z-index： 10; /> 
< / div> 
  

当然不要使用 style =

将两个图像放入div中。

<如果你给你的包装器div赋予 position：relative; 属性，那么这个div中的任何东西都是相对于它的位置。这意味着，您可以向播放图片添加 position：absolute; ，并使用 left：XXpx; 和 top：XXpx; 你可以将它放在你想要的位置。您可能想使用 z-index 来定义哪个图片应该在顶部。较高的 z-index 。请注意： z-index 仅在设置位置时有效。

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

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.

Can anyone help me?

Thank you in advance!

解决方案

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.

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-index to define which picture should be on the top. The higher z-index the higher layer. Please note: z-index works only if position is set.

这篇关于在CSS中将图像定位到另一个现有的&lt; img /&gt;`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！