背景层覆盖页面内容求助：Web页面内容无法查看与交互

问题原因 #

使用position: fixed的.bg元素默认处于更高的层叠层级，会遮挡后续文档流中的内容，导致内容无法查看和交互。

解决方案 #

方法1：调整背景层层叠顺序 #

给.bg添加z-index: -1，将其层级置于所有内容下方：

* {
  box-sizing: border-box;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1; /* 添加该行代码 */
}

h1 {
  text-align: center;
}

.logo {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

方法2：直接通过body设置背景图（更简洁） #

无需额外的.bg容器，直接用body的background属性配置背景，背景会自动处于内容下方：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: url('https://via.placeholder.com/2000/0000FF/808080') no-repeat center center fixed;
  background-size: cover;
}

h1 {
  text-align: center;
}

.logo {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

对应的HTML可移除.bg容器：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <title>Keyless Car</title>
</head>

<body>
  <div class="logo">
    <img src="https://via.placeholder.com/150/000000/808080">
  </div>
  <div class="container">
    <img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

补充说明 #

你提到按钮图片为PNG格式，由于PNG支持透明通道，不会出现背景污染问题，两种方案都能完美适配。

内容的提问来源于stack exchange，提问作者Xavi Marquez