javascript - 为什么我的背景图片隐藏了我的键码生成器？

Question

我正在尝试制作一个带有背景图片的键码生成器。

键码生成器工作正常，背景图像也是如此，但背景图像显示在浏览器中的键码生成器之上。

我希望键码生成器与背景图像一起显示，嗯，在背景中!

HTML 正文:

<div class="bg"></div>

        <div class="keycodegen">
        <h1 id='input1'></h1>
        <h1 id="input2"></h1>
        <h1 id="input3"></h1>
        </div>

JavaScript:

const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
const input3 = document.getElementById('input3')

document.addEventListener('keydown', () => {
  input1.textContent = event.key
  input2.textContent = event.code
  input3.textContent = event.which
})

CSS:

body, html {
    height: 100%;
}

.bg{
    background-image: url("https://2static1.fjcdn.com/comments/Surely+one+of+these+new+found+egyptian+tablets+will+reveal+_5e782522453272e58724ef4ed55cbbfa.jpg");

    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
    opacity: 0.5;

}
}

}

.h1 {
    height: 10px;
    width: 10px;

}

Answer 1

出现背景的 div 是 100% 高。

标题不在里面:所以它们必须在之后。

如果您想要标题后面的背景，请将标题放在具有背景的内部元素中。

(并且为此拍摄使用标题可能不是一个好的选择。如果您想获得用户输入，请使用 <input>)。