将图像放在CSS中另一个现有的`<img rel="nofollow noreferrer" />`上

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设置时才有效.