Javascript 如何在javascript中叠加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3110833/
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 overlay images in javascript?
提问by Leo
I need to solve the following problem.
我需要解决以下问题。
I have two (or more) .PNG images of the same dimensions. Each PNG image is created with transparent background color.
我有两个（或更多）相同尺寸的 .PNG 图像。每个 PNG 图像都是使用透明背景色创建的。
I need to display img1 and upon it img2, so in places where img2 has trancparent color, img1 will be seen.
我需要显示 img1 并在其上显示 img2，因此在 img2 具有透明颜色的地方，将看到 img1。
For example: img1 upper part filled with transparent color and a cow on down part. img2 upper part contains clouds and downpart filled with transparent color.
例如：img1 上半部分填充透明色，下半部分是一头牛。img2 上半部分包含云彩，下半部分填充透明色。
I want to combine these two images and see clouds above the cow.
我想把这两个图像结合起来，看看牛上方的云彩。
I understand that I need to use some filter when displaying both images, but not sure which one and what parameters of it to use.
我知道在显示两个图像时我需要使用一些过滤器，但不确定要使用哪一个以及它的哪些参数。
回答by pkaeding
Something like this should work (using just HTML/CSS):
这样的事情应该可以工作（仅使用 HTML/CSS）：
HTML:
HTML：
<div class="imageWrapper">
<img class="overlayImage" src="cow.png">
<img class="overlayImage" src="clouds.png">
<img class="overlayImage" src="downpart.png">
</div>
CSS:
CSS：
.imageWrapper {
position: relative;
}
.overlayImage {
position: absolute;
top: 0;
left: 0;
}
Keep in mind that IE6 does not handle transparency in PNGs very well. If you need it to work in IE6, you will need to apply the filters you mentioned. This procedure is detailed here.
请记住，IE6 不能很好地处理 PNG 中的透明度。如果您需要它在 IE6 中工作，则需要应用您提到的过滤器。此处详细介绍了此过程。
回答by SLaks
You don't need to use any sort of filter (except in IE6).
您不需要使用任何类型的过滤器（IE6 除外）。
You can simply place to <img>elements on top of each-other, using CSS position: absoluteto make both elements occupy the same area.
您可以简单地将<img>元素放在彼此之上，使用 CSSposition: absolute使两个元素占据相同的区域。
In IE6, you'll need an AlphaImageLoaderfilter simply to display the PNGs with transparency
回答by Mithun Sreedharan
If you are using jquery try this in any browser
如果您使用 jquery，请在任何浏览器中尝试此操作
<script>
$(function () {
var position = $("#i1").offset();
$('#i2').css({ position:'absolute', top:position.top, left: position.left});
});
</script>
<img id='i1' src='images/zap_ring.png' />
<img id='i2' src='images/zap_ring_hover.png' />
and adjust top& leftvalues
并调整top和left值
$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});
回答by Pikrass
You can try setting their .style.positionto "absolute", give them the same coordinates with left and top (or right or bottom), and then change their z-index. Although it's quite dirty, and maybe it doesn't work well with your page, but I can't think of another solution.
您可以尝试将它们设置.style.position为“绝对”，为它们提供与左和上（或右或下）相同的坐标，然后更改它们的 z-index。虽然它很脏，而且可能对您的页面效果不佳，但我想不出其他解决方案。
