如何使用JavaScript将多张图片叠加在一起

Question

我有一个小需求：我需要通过JavaScript在另一张图片上方添加图像。请给我建议！

function sampleImage()
{     
    document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}

- user1211133

---

问题通常在其中某个地方带有“？”。以目前的状态来看，您的帖子完全没有用处。添加更多细节，解释您实际想要做什么，并展示您已经尝试了什么。 - Bojangles

你需要提供一个更清晰的问题。此外，你需要接受一些之前的答案（当人们看到你不接受答案时，他们就没有动力去帮助！） - random_user_name

Answer 1

您需要将这两张图片放在一个<div>标签中，并使用以下CSS属性：

div {
    position: relative;
}

​#img2 {
    position: absolute;
    top: 100px;
    left: 100px;
}

请查看http://jsfiddle.net/C8hh4/。

第二张图片必须是第一张图片的兄弟节点，不能是后代，因为这不是合法的HTML。该

需要具有相对位置，否则#img2的绝对位置将相对于最近的祖先计算，而该祖先没有默认的静态位置。 top的值应该是外部图像高度和内部图像高度之差的一半，左侧/宽度同理。

如果您的内容是静态的，请手动计算这些值。如果它是动态的，请使用JS设置样式：

var img1 = $('#img1')[0];
var img2 = $('#img2')[0];

var top = 0.5 * (img1.height - img2.height);
var left = 0.5 * (img1.width - img2.width);

$(img2).css({top: top, left: left});

- Alnitak

Answer 2

为什么要使用JavaScript？当然，您可以使用画布并将它们彼此覆盖，但我建议使用简单的CSS：

<img
  style="padding: 20px 7px, background: url('/some/frame.png')"
  src="/cock.jpg"
  width="50px" height="40px"
/>

你可以使用一个类来实现，内联样式只是更短而已。

- Bergi

Answer 3

您可以使用相对定位。 将图像堆叠在一起，并设置position:relative;top:VALUE; 值应为-背景图像的一半高度-前景图像的一半高度。

另一种方法是将前景图像包装在一个div中，并将背景图像设置为background-image。

- Display Name

---

相对位置不会很好地工作 - 它是相对于元素的 预期 位置计算的。 - Alnitak

因为要将图像叠放在彼此之上，第二个图像必须相对于其容器（和第一张图像）具有_absolute_位置。 - Alnitak

快速粗暴：<img src="http://www.deshow.net/d/file/travel/2009-06/germany-landscape-605-2.jpg" /><br /> <img style="position:relative;top:-550;left:490" src="http://www.teezeh.de/wp-content/uploads/2009/06/IE.jpg" /> - Display Name

就像我说的那样，它不能很好地工作。如果您知道两个图像在相同（绝对）坐标中开始，则更容易。 - Alnitak

@Alnitak 是的，它效果不是很好，但确实可以。我的首选方法是使用背景图像。 - Display Name

Answer 4

你应该这样做（我看到了 jQuery 标签）：

$("#img1 img").first().prop("src", "C:\Users\rajasekhark\Desktop\assets\images\Cock.png");

还有一个建议：不要使用本地磁盘的完整路径...

- Snake Eyes

Answer 5

jQuery选项将是

$("#img1").prop("src","blahblah.jpg");

虽然我不太理解你的问题。

如果你的意思是需要在鼠标悬停时更改图像，那么也许这可以帮到你...

$("#img1").hover(
    function () {
    $(this).prop("src","newImage.jpg");
    }, 
    function () {
    $(this).prop("src","originalImage.jpg");
});

编辑：

好的... 你需要一个带有绿色闪卡作为背景图片的 div。然后将公鸡图片放在该 div 中，但设置为 display:none；

然后在悬停时只需显示公鸡的图像即可。

$("#containerDiv").hover(
    function () {
    $(this).find("img").show();
    }, 
    function () {
    $(this).find("img").hide();
});

- Tom

---

感谢您的快速回复，我现在有两张图片，一张是绿色的闪卡，另一张是公鸡。现在我需要将公鸡插入到闪卡中，如图所示。 - user1211133

如果你不理解问题，为什么要回答它呢？ - Alnitak