如何将一张图片放置在另一张图片上方？

Question

如何将一张图片放在另一张更大的图片上方，就像在YouTube上，在视频缩略图上显示播放按钮一样？

- Pankaj

---

这与此相关吗？- https://dev59.com/DHRC5IYBdhLWcg3wG9bp - aasu

Answer 1

制作一个半透明的PNG图片，上面有一个“播放”符号，大小可自定义（例如240x320）。

假设你将其命名为“overlay.png”，并且YouTube生成的缩略图位于http://img.ytimg.com/abcdefg/0.jpg

现在你只需要在你的代码中添加以下内容：

<a href="destination_of_your_link">
    <img src="overlay.png" width="320" height="240" border="0"
         style="background: url(http://img.ytimg.com/abcdefg/0.jpg) center center black;" />
</a>

只要你的目标受众不再使用IE6，您就可以放心了。

- Scottie Mac

---

简单直接。对于解决方案的简洁性表示赞赏。已点赞。 - Ahmad Alfy

为什么我们往往总是寻找最复杂的做事方式？这个答案非常实用，简短而有效。+1。 - digitai

Answer 2

我不确定YouTube是否使用图像来实现这种效果，难道它还不是Flash播放器吗？

无论如何，如何实现这个效果很大程度上取决于你想要达到的设计。让我们假设你想要实现YouTube的样式，其中你有一个缩略图并希望在其上添加一个播放按钮图像。如果你想让缩略图成为一个实际的<img>标记，你需要一些额外的标记，如下所示：

<div class="thumb-wrapper">
<img src="mythumbnail.gif" alt="my awesome video" /><span></span>
</div>

需要包装器，这样您才能正确地定位img和span，并具有容纳它们的尺寸。 span是覆盖图像的位置。

.thumb-wrapper {
position:relative;
}

.thumbwrapper span {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: transparent url(overlay.png) no-repeat;
}

（我实际上还没有测试过，如果它明显错误，请告诉我，我会修改！）

这里假设了几件事情：

1. 您的缩略图始终是固定大小的，并且覆盖图像与其匹配
2. 您的覆盖图像是半透明的PNG

您还可以使用 opacity: 样式来实现 #2。当然，IE6将出现问题，如果选择使用透明图像，则需要为其使用PNG修复程序，或者如果使用该方法，则需要单独的不透明度滤镜。这两种方法无疑在 Stack Overflow 的其他地方得到了回答，或者很容易通过 Google 找到。

如果您有其他要求，可能可以在不使用额外标记的情况下完成此操作，正如我所说，这完全取决于您确切需要什么。某些要求可能没有 JavaScript 就无法实现（当然这意味着您可以使用 JavaScript 注入任何额外的标记！）。

- roryf

Answer 3

您可以在StackOverflow上的以下帖子中找到解决方案： 如何在另一个图形上绘制图形 简要地说（引用自Ipsquiggle）：

<div style="position:relative">
  <div>
    <img url="backgroundimg.png">
  </div>
  <div style="position:absolute; left:0; top:0;">
    <a href="foo.html"><img url="smallgraphic.png"></a>
  </div>
</div>

更多详细信息可以在原帖中了解为什么以及如何运作。

- tkokoszka

Answer 4

如果您对图像大小有很好的控制，我们可以将背景用于各种元素 - 例如，将表格单元格的背景设置为一个图像并在单元格内放置img标签。

- n8wrl

Answer 5

以 YouTube 为例，你可以很容易地使用 2 张图片、1 个 img 标签和一点 CSS 来实现这个效果 ;)

<style>
    img.youtube {
        width:500px; height:500px; 
        margin:0; padding:0; 
        background:transparent url(/point/to/your/larger/image.jpg) no-repeat center
    }
</style>

<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" />

它的工作原理很简单，您将小的YouTube图像设置为透明的PNG或GIF，然后将背景图像设置为较大的图像，这将使较小的图像在中心位置，没有额外的标记。

- Phunky

---

没有多余的标记是很好的，当你所拥有的标记具有意义时，比如这种情况下的图片只是播放按钮，如果没有 CSS 样式就没有任何意义。我更愿意增加额外的标记以确保它在没有样式的情况下也有意义，而不仅仅是一堆播放按钮的列表！ - roryf

非常正确，但那不是 OP 所询问的 ;) - Phunky