HTML、CSS - 图像内的图像，如何做到这一点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9312961/
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 - image inside image, how to do that?
提问by user984621
I have this piece of HTML code:
我有这段 HTML 代码：
<div>
<div>
<image src="image-inside-pic-png.png" alt="">
</div>
<image src="pic.png" alt="" />
</div>
The pic.png(300x300 px) is the main image. I would like to put the image-inside-pic-png.png(20x20 px) inside of it. When I apply position: absolute;on the small image, it works only momentarily. If I change the size of either, it no longer works.
所述pic.png（300×300像素）是主图像。我想把image-inside-pic-png.png(20x20 px) 放在里面。当我申请位置时：绝对；在小图像上，它只能暂时起作用。如果我更改任何一个的大小，它就不再起作用。
So my question is, how can I move the small image always in the big image - and this small image will be always 15pxfrom the top and 30pxfrom the right margin of the big image?
所以我的问题是，如何始终在大图像中移动小图像 - 这个小图像始终距离大图像的顶部15px和30px的右边距？
Thank you for help
谢谢你的帮助
回答by Waiting for Dev...
I think this should work:
我认为这应该有效：
HTML:
HTML：
<div>
<img src="image-inside-pic-png.png" alt="" class="inner-image"/>
<img src="pic.png" alt="" />
</div>
CSS:
CSS：
div {
position: relative;
}
.inner-image {
position: absolute;
top: 15px;
right: 30px;
}
Anyway, make sure you need to do this with HTML. Maybe it's better to simply edit the image with Photoshop or Gimp. Or maybe one image it's only for styling purpose, then you should use CSS.
无论如何，请确保您需要使用 HTML 执行此操作。也许最好使用 Photoshop 或 Gimp 简单地编辑图像。或者也许一张图像仅用于样式目的，那么您应该使用 CSS。
回答by Fabrizio Calderan
Without changing your markup this can be achieved e.g. using display:inline-blockto the outermost div element (so it won't extend for 100% of the available width) and position relative + absolutefor outermost div and thumbnail
无需更改您的标记，这可以实现，例如使用display:inline-block最外层 div 元素（因此它不会扩展到可用宽度的 100%）和relative + absolute最外层 div 和缩略图的位置
see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity
看到这个小提琴：http: //jsfiddle.net/cRqhT/3/
为简单起见定义了边框和图像大小
回答by Qishan
put both images in one div which uses position:relatvie, then apply position:absolute to images, and adjust the value as you need.
将两个图像放在一个使用 position:relatvie 的 div 中，然后将 position:absolute 应用于图像，并根据需要调整值。
