html - 如何设置 React 应用程序的背景图片

Question

我有一个 React 应用程序，我想给它添加一个背景图片。我不知道该怎么做，其他 stackoverflow 答案也不清楚。该图像名为 background.jpeg，并保存在与 App.js 相同的文件夹中。这是我想要的背景代码。谢谢!

return (
    <div>
      <div className = "top">
      <h1>Hit the button to generate a random top 25 all-time cd according to the Rolling  Stone</h1>
      </div>
    <div className =  "Outer">
    <div>
      <img src = {ImageArray[this.state.WhichRecord][0]} width = "400px" height = "400px"/>
      <p></p>
      <button onClick={this.RandomNumber}>Press me for a new album!</button>
      <p>Artist: {ImageArray[this.state.WhichRecord][1]} </p>
      <p>Album: {ImageArray[this.state.WhichRecord][2]} </p>
    </div>
    </div>
    </div>
  );
}
}
export default App;

这是目前为止的 css:

.Outer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50px;
}

.top {
  display: flex;
  justify-content: center;
}

Answer 1

您需要将内容包裹在一个 div 中，然后在您的渲染方法中设置 backgroundImage 属性。其余相关属性可以在您的 css 类中定义。

指南:

      <div style={{backgroundImage: `url(${ImageArray[this.state.WhichRecord][0]}`}} className="bg">
         <p></p>
         <button onClick={this.RandomNumber}>Press me for a new album!</button>
         <p>Artist: {ImageArray[this.state.WhichRecord][1]} </p>
         <p>Album: {ImageArray[this.state.WhichRecord][2]} </p>
     </div>

CSS:

.Outer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50px;
}

.top {
  display: flex;
  justify-content: center;
}

.bg {
   width: 400px;
   height: 400px;
   background-position: center;
   background-size: cover;
}