reactjs - 如何在反应中设置背景图像

Question

我在为我的 React 应用程序设置背景图像时遇到问题。

当我尝试添加背景图像时，它会出现在我的导航栏中。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Background from './Images/BackGround1.jpg'
import Navbar from './Components/Navbar.js';

function Header() {
  return (
    <div className="App" style={{
      backgroundImage: `url(${Background})`, 
      backgroundPosition: 'top',
      backgroundSize: '100% 100%',
      backgroundRepeat: 'no-repeat'
      }}>
       <Navbar />

         
       
    </div>
  );
}

export default Header;

如何添加背景图像并将导航栏保持在背景图像之上？

标签： reactjs

Answer 1

由于您已经为整个 div 声明了样式，并且 navbar 位于同一个 div 内，这使得背景图像出现在 Navbar 上。尝试使用

<React.Fragment> 
<div className="App" >
</div>
<Navbar />
</React.Fragment>