CSS 如何将图像放置在另一个图像上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/785458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place an image over another?
提问by Scottie Mac
How to put an image over another bigger image, like on youtube, a play button is displayed on top of video thumbnail?
如何将图像放在另一个更大的图像上，例如在 youtube 上，视频缩略图顶部会显示一个播放按钮？
回答by Scottie Mac
Make a semi-transparent PNG graphic with a "Play" symbol and the size you want (e.g. 240x320).
制作一个带有“播放”符号和所需大小（例如 240x320）的半透明 PNG 图形。
Let's say you named it "overlay.png", and let's say the YouTube-generated thumbnail is at http://img.ytimg.com/abcdefg/0.jpg
假设您将其命名为“overlay.png”，假设 YouTube 生成的缩略图位于http://img.ytimg.com/abcdefg/0.jpg
Now all you need in your code is this:
现在你需要在你的代码中是这样的：
<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>
As long as your target audience is not still using IE6, you should be safe.
只要您的目标受众不再使用 IE6，您就应该是安全的。
回答by roryf
I'm not sure that YouTube uses images for this effect, isn't it still the Flash player?
我不确定 YouTube 是否使用图像来实现此效果，它仍然是 Flash 播放器吗？
Anyhow, exactly how this is done depends very much on the design you want to achieve. Lets assume that you want to achieve the YouTube style, where you have a thumbnail image and want to overlay a play button image on top. If you want the thumbnail to be an actual <img>tag you will need some extra markup, like this:
无论如何，具体如何完成在很大程度上取决于您想要实现的设计。让我们假设您想要实现 YouTube 风格，您有一个缩略图图像并希望在顶部覆盖一个播放按钮图像。如果您希望缩略图成为实际<img>标签，您将需要一些额外的标记，如下所示：
<div class="thumb-wrapper">
<img src="mythumbnail.gif" alt="my awesome video" /><span></span>
</div>
The wrapper <div>is required so you can target the img and span correctly, and have dimensions to contain them in. The span is where the overlay image will go.
<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;
}
(I haven't actually tested this, if its blatently wrong let me know I'll revise it!)
（我还没有真正测试过这个，如果它明显错误让我知道我会修改它！）
This assumes a couple of things:
这假设了几件事：
- Your thumbnails will always be a fixed size and your overlay image matches that
- Your overlay image is a semi-transparent PNG
- 您的缩略图将始终是固定大小，并且您的叠加图像与
- 您的叠加图像是半透明的 PNG
You could also use the opacity:style to achieve #2. Of course, IE6 will rear it's ugly head and you'll need to use a PNG fix for it if going the transparent image route, or a separate opacity filter if using that method. Both of these are undoubtadly answered elsewhere on Stack Overflow or easily google-able.
您也可以使用opacity:样式来实现#2。当然，IE6 会导致它丑陋的头部，如果使用透明图像路由，则需要使用 PNG 修复程序，或者如果使用该方法，则需要使用单独的不透明度过滤器。毫无疑问，这两个都在 Stack Overflow 的其他地方或很容易在 google-able 上得到了回答。
If you have other requirements it might be possible to do this without the extra markup, as I said it all depends on what you need exactly. Some requirements may not be possible without JavaScript (which would of course mean you could inject any extra markup with that!).
如果您有其他要求，则可以在没有额外标记的情况下执行此操作，正如我所说，这完全取决于您的确切需求。如果没有 JavaScript，某些要求可能无法实现（这当然意味着您可以使用它注入任何额外的标记！）。
回答by tkokoszka
You will find the solution in the following thread on StackOverflow: How to draw a graphic over another graphic
您将在 StackOverflow 上的以下线程中找到解决方案： 如何在另一个图形上绘制图形
Shortly (quoting after Ipsquiggle) :
不久（在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>
More details why and how it works in the original thread.
更多细节为什么以及如何在原始线程中工作。
回答by n8wrl
If you have good control over image size, we have used the background to various elements - for example, set the background of a table cell to one image and put an img tab inside the cell.
如果您对图像大小有很好的控制，我们已经将背景用于各种元素 - 例如，将表格单元格的背景设置为一个图像，并在单元格内放置一个 img 选项卡。
回答by Phunky
Taking your example of youtube, you could very easily do this with 2 images and 1 img tag and a little bit of CSS of course ;)
以您的 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" />
How it works is simple, you have the small youtube image as transparent PNG or GIF and then set the background image as the larger image, this will then give the effect of the smaller image being in the center with no extra markup.
它的工作原理很简单，你有一个小的 youtube 图像作为透明的 PNG 或 GIF，然后将背景图像设置为较大的图像，这将产生较小的图像位于中心的效果，没有额外的标记。
