HTML/CSS - 将 img 放在 img 之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5414931/
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
HTML/CSS - Put img on top of img?
提问by Johnny Appal
I have two png's. One is the actual image, another is a mostly transparent image with a sticker price icon in the top right. I know I could combine these in photoshop and just create one image.
我有两个png。一个是实际图像，另一个是大部分透明的图像，右上角有一个标价图标。我知道我可以在 Photoshop 中将这些组合起来，然后只创建一张图像。
But I need these to be generated dynamically, for a bunch of different base images.
但是我需要为一堆不同的基本图像动态生成这些。
Is there some way to code the "actual image" and then use code to overlay the "transparent sticker image"?
有没有办法对“实际图像”进行编码，然后使用代码覆盖“透明贴纸图像”？
回答by harpo
Sure, the easiest way would be to absolutely position both images within their container:
当然，最简单的方法是将两个图像绝对定位在它们的容器中：
<div style="position:relative">
<img src="main-image.jpg" style="position:absolute;"/>
<img src="overlay-image.png" style="position:absolute;"/>
</div>
The position:relativeon the container is needed for absolute positioning of children to work. Of course, if the container is itself absolutely positioned already, then that's fine.
该position:relative容器上需要为孩子的工作绝对定位。当然，如果容器本身已经绝对定位，那也没关系。
The position:absoluteis notneeded on the base image if both images are in the top-left corner, but having it allows you to tweak its placement if needed.
该position:absolute是没有必要的基本图像上，如果两个图像的左上角，而拥有它可以让你如果需要调整它的位置。
You could also use static position on the main image and relative position on the overlay image:
您还可以使用主图像上的静态位置和叠加图像上的相对位置：
<div style="position:relative">
<img src="main-image.jpg" style="width:100px"/>
<img src="overlay-image.png" style="position:relative; left:-100px"/>
</div>
but for this to work you'd need to know the width of the base image.
但要使其正常工作，您需要知道基本图像的宽度。
回答by Paul Sham
Wrap the images in a <div>with the overlay image first and the actual image second, and can set the css of the div to position: relative.
将<div>图像先用叠加图像包装在 a 中，然后将实际图像包装起来，并且可以将 div 的 css 设置为position: relative.
The two images can then be given the css {position: absolute; top: 0; left: 0;}.
然后可以为这两个图像提供 css {position: absolute; top: 0; left: 0;}。
<div style="position:relative;">
<img src="overlay.png" style="position: absolute; top: 0; left: 0;">
<img src="actual.png" style="position: absolute; top: 0; left: 0;">
</div>`
If you really want to be safe, you can set the z-indexof each image.
如果你真的想安全，你可以设置z-index每个图像的 。
回答by Tyler Crompton
You will need to set the position attribute to relative or absolute, set the left and top attributes to the desired values, then set the z-index attribute to 1 (assuming that you don't have other z-index properties already set). Keep in mind that the place where the image is supposed to render without the changed top and left attributes, there will be a space where it should be.
您需要将位置属性设置为相对或绝对，将左和上属性设置为所需的值，然后将 z-index 属性设置为 1（假设您尚未设置其他 z-index 属性）。请记住，在没有更改 top 和 left 属性的情况下应该渲染图像的地方，应该有一个空间。
