Question

我一直在开发一个简单的应用程序，并且我试图将图像设置为我的主页的背景（图像覆盖了我的所有背景）我检查了很多关于stackoverflow的答案，但我无法纠正，我不知道该如何解决？

    App {
      text-align: center;
      height: 100%;
      background: url("N.png") no-repeat;
      background-size: cover;
    }

    .App-logo {
      animation: App-logo-spin infinite 20s linear;
      height: 80px;
    }

    .App-header {
      background-color: #222;
      height: 150px;
      padding: 20px;
      color: white;
    }

    .App-title {
      font-size: 1.5em;
    }

    .App-intro {
      font-size: large;
    }

    @keyframes App-logo-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }



class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Answer 1

还将父元素的height设置为100%。

html,
body,
#root {
    height: 100%;
}

在React中为我的页面设置背景

1 个答案: