将大小相等的图像完全重叠在另一个图像上

Overlap equal sized images completely on top of another image

本文关键字：图像 重叠 另一个      更新时间：2023-09-26

我是一个刚开始的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"标记?

如何使图像重叠:

.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索引。

如果你使用显示，你不需要重叠任何东西

相关文章：