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”标记的最简单方法是什么？

score 1 · Accepted Answer

如何使图像重叠：

.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; 和显示：块；在你的 js 中，甚至更改 z-index。

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

1 回答 1