javascript - 如何使用javascript将一个图像添加到另一个图像上

Question

我有一个小要求:我需要通过 javascript 在另一个图像上添加图像(向上)。请给我建议!

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

Answer 1

您需要将两张图片包含在 <div> 中然后使用以下 CSS 属性:

div {
    position: relative;
}

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

参见 http://jsfiddle.net/C8hh4/

第二张图片必须是第一张图片的兄弟，它不能是后代，因为那不是合法的 HTML。 <div>需要有 relative否则位置#img2的绝对位置将相对于不具有默认值的最近祖先计算static位置。

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});