Question

如何将图像放在另一个较大的图像上，比如在youtube上，播放按钮会显示在视频缩略图的顶部？

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，您应该是安全的。

Answer 2

我不确定YouTube是否使用图像来实现此效果，是不是仍然是Flash播放器？

无论如何，这完全取决于您想要实现的设计。让我们假设你想要实现YouTube风格，你有一个缩略图图像，并希望在顶部覆盖一个播放按钮图像。如果您希望缩略图是实际的<img>标记，则需要一些额外的标记，如下所示：

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

包装器<div>是必需的，因此您可以正确定位img和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;
}

（我实际上没有对此进行测试，如果它出现错误，请告诉我，我会修改它！）

这假设了几件事：

您的缩略图始终是固定尺寸，而叠加图像与
您的叠加图片是半透明的PNG

您还可以使用opacity:样式来实现＃2。当然，IE6会让它变得难看，如果使用透明图像路径，你需要使用PNG修复，如果使用该方法，则需要使用单独的不透明度滤镜。这些都无疑在Stack Overflow的其他地方得到了回答，或者很容易google-able。

如果您有其他要求，可以在没有额外标记的情况下执行此操作，正如我所说，这完全取决于您的需求。如果没有JavaScript，可能无法满足某些要求（这当然意味着你可以注入任何额外的标记！）。

Answer 3

您将在StackOverflow上的以下线程中找到解决方案： How to draw a graphic over another graphic

很快（在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>

详细说明原始主题中原因和方式的原因和方法。

Answer 4

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

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，然后将背景图像设置为较大的图像，这将使较小的图像在中心的效果没有额外的标记。

如何将图像放在另一个上？

5 个答案: