如何在 React+bootstrap 中添加背景图片?
How do I add a background image in React+bootstrap?
我一直在尝试向我的网页添加背景图片。这就是我目前正在尝试的方式,但它似乎不起作用。
在我的 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");
}
这似乎不起作用。我期待在屏幕上看到背景图像 div 但什么也没有显示。
代码正确。我在想你的 <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;
我一直在尝试向我的网页添加背景图片。这就是我目前正在尝试的方式,但它似乎不起作用。
在我的 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");
}
这似乎不起作用。我期待在屏幕上看到背景图像 div 但什么也没有显示。
代码正确。我在想你的 <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;