如何在 React+bootstrap 中添加背景图片？

Question

我一直在尝试向我的网页添加背景图片。这就是我目前正在尝试的方式，但它似乎不起作用。

在我的 App.js 文件中：

import React from 'react';
import './App.css';
import NavBar from './Components/NavBar';
import LandingPageImage from './Components/LandingPageImage';


function App() {
  return (
    <div className="App">
      <div className="Screen" >
        <NavBar/>
        <LandingPageImage/>
      </div>
    </div>
  );
}

export default App;

在我的 App.css 文件中：

.Screen {
 background-image: url("https://images.unsplash.com/photo-1536514498073-50e69d39c6cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80");
}

这似乎不起作用。我希望在 Screen div 上看到背景图片，但什么也没显示。

Answer 1

代码是正确的。我在想你的<Navbar /> 和<LandingPageComponent /> 用他们自己的背景覆盖了整个div，因此你看不到它。

尝试在 div 中添加一些文本，看看它是否正常工作。

import React from 'react';
import './App.css';
import NavBar from './Components/NavBar';
import LandingPageImage from './Components/LandingPageImage';


function App() {
  return (
    <div className="App">
      <div className="Screen" >
        <NavBar/>
        <LandingPageImage/>
        Text to give additional height to div.
      </div>
    </div>
  );
}

export default App;