如何使用背景图像作为区域

Question

我是新手，我很困惑如何在每一页上设置背景图像，这里是我的app.js。我有4张图片，我想用它们作为每个部分的背景，但是它不起作用，只是显示了一张图片。我不知道是否可能制作一个网站，只在每个部分的背景图片。

这是我的代码App.js。

import NavBar from "./NavBar";
import "./App.css";

function App() {
  return (
    
      <div className="App">
      <NavBar/>
      <section className="Home-1">
      <div className="Home"></div>
      </section>
      <section className="Page-2">
      <div className="Page"></div>
      </section>
      <section className="Page-3">
      <div className="Page"></div>
      </section>
      <section className="page-4">
      <div className="Page"></div>
      </section>
      </div>
     
  );
}

export default App;



.App {
  text-align: center;
  font-family: "Press Start 2P", "VT323";
  color: white;
}

.body {
  overflow: auto;
  background-color: black;
}

.overlay {

  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;

}

.Home-1 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Home.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-2 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Page2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-3 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Page3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-4 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/Page4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

Answer 1

当您使用position: absolute时，该部分将相互重叠。

试试这个：

.Home-1 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: red;
}

.Page-2 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}

.Page-3 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: green;
}

.Page-4 {
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: yellow;
}

Answer 2

它使用此配置，但如何使图像响应。

.Home-1 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Home.png");
}

.Page-2 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Page2.png");
}

.Page-3 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Page3.png");
}

.Page-4 {
  z-index: -1;
  height: 150vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  background-image: url("./assets/background/Page4.png");
}