首页 > 解决方案 > 在 React 中为我的页面设置背景

问题描述

我一直在开发一个简单的应用程序,我正在尝试为我的主页设置图像背景(图像覆盖了我的所有背景)我已经检查了 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;

标签: reactjs

解决方案


height父元素的 设置为100%也。

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

推荐阅读