javascript - 将大小相等的图像完全重叠在另一幅图像之上

Question

我是一名 Web 开发新手，我想将两张图片完全重叠。我正在开发一个应用程序，用于检查输入到应用程序中的答案是否正确。对于每个答案，我将分别为正确/不正确的答案显示复选标记或“X”标记。为此，我将使用 CSS 和 JavaScript:

CSS:

#checkmark { visibility: hidden}
#xmark {visibility:visible}

JavaScript:

function showCorrect(input, ans) {
    if (input == ans) {
        document.getElementById('checkmark').style.visibility=visible;
    }
}

为此，我只想让复选标记可见，以便它完全覆盖 xmark。将图像完全叠加在任一图像之上以便复选标记覆盖“X”标记的最简单方法是什么？

Answer 1

如何让图片重叠:

.imagewrapper {
position:relative;}

.imagewrapper img {
position:absolute;
top:0px;
left:0px;
}

.img1 {
z-index:1
}
.img2 {
z-index:2;
}

HTML

<div class="imagewrapper">
<img class="img1" src="img1.jpg" />
<img class="img2" src="img2.jpg" />
</div>

这将使图像重叠。

Zindex 控制哪个图像在顶部。

或者，您也可以使用 display:none;并显示: block ；在你的 js 中甚至更改 z-index。

如果您使用显示，则不需要重叠任何内容。