我想使用 HTML 和纯 JavaScript 将小图像嵌入到大图像上。它可以在 Chrome 和 Firefox 中运行。但它在 IE 8 中不起作用。我按照 http://www.w3schools.com/cssref/pr_pos_z-index.asp 中的建议使用了 z-index:-1 。有人可以帮忙提供代码片段吗？
请找到示例代码片段，该代码片段适用于 Chrome、Safari、Firefox，但不适用于 IE8
<html>
<head>
<title>Image over Image</title>
<script type="text/javascript">
function loadIMG(){
var backgroundIMG = document.getElementById("bigIMG");
var boundObject = backgroundIMG.getBoundingClientRect();
var img = document.getElementById("smallIMG");
img.style.top = (boundObject.top + (boundObject.height * 0.2))+"px";
img.style.left = (boundObject.left + (boundObject.width * 0.2))+"px";
img.style.height = (boundObject.height * 0.6)+"px";
img.style.width = (boundObject.width *0.6)+"px";
img.style.position = "absolute";
img.style.display = "inline";
}
</script>
</head>
<body onclick="loadIMG();">
<center><h1>Image on Image</h1>
<h6>Click on the page to embed small image on big image</h6></center>
<img id="bigIMG" src="http://www.sxc.hu/pic/m/t/tu/tulsaeupho/1206951_blue_flowers_splatter_and_swirls_background_set_1.jpg">
<img id="smallIMG" src="http://i52.photobucket.com/albums/g14/1kevinm/small_unittus_sm_icon.png" style="display:none">
</body>
</html>
提前致谢
最佳答案
首先，我将bigIMG和smallIMG的样式放在一个单独的CSS文件中，例如包含的style.css
#bigIMG {
z-index: -1;
posistion:absolute;
}
#smallIMG {
position: absolute;
display: block;
}
请注意，两个图像都具有position:absolute，并且bigIMG具有z-index:-1，因此它将被放置在其他内容的后面。
现在，在 html 的 HEAD 元素中，包含 style.css，如下所示:
<link rel="stylesheet" type="text/css" href="styles/style.css">
然后尝试调整 css 中的“top”和“left”参数以正确定位图像。您可以使用 chrome 的元素检查器即时手动输入坐标
关于javascript - 使用 HTML 和纯 JavaScript 在大图像上嵌入小图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12705435/