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

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

(我实际上没有对此进行测试,如果它出现错误,请告诉我,我会修改它!)

这假定了几件事:

1. 您的缩略图将始终是固定大小,并且您的叠加图片与之匹配
2. 您的叠加图片是半透明的PNG

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

如果您有其他要求,可以在没有额外标记的情况下执行此操作,正如我所说,这完全取决于您的需求.没有JavaScript,一些要求可能是不可能的(这当然意味着你可以用它注入任何额外的标记!).

Answer 3

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