Question

我想将图像设置为div的背景，但是无法正确放大。我有一个页眉和页脚和应该具有图像的div在它们之间。图像的顶部和底部位于页眉和页脚下方。

这是我的CSS：

身体和HTML标签：

body,html {
      /* margin:0; */
      height: 100%;
      /* Fix page(No Scroll Bar)*/
      min-height: 100%;
      overflow-y: auto;
      position: absolute;
      margin: 0px;
      overflow: hidden;
      top: 0px;
      bottom: 0px;
      width: 100%;
      /* Fix page(No Scroll Bar)*/
}

正文标签中的Main Div

 const BackgroundContainer = styled(Container) `
    background-color : #4c6c81;
    height:100%;
    width:100%;   
`

function App() {
  return (
    <BrowserRouter>
      <BackgroundContainer className="RED">
          <Header/>
          {/* <Container>  */}
            <Route exact path='/' component={Nav}></Route>
            <Route path='/music' component={Music}></Route>
            <Route path='/swim' component={Swim}></Route>
            <Route path='/system' component={System}></Route>
            <Route path='/lights' component={Lights}></Route>
          {/* </Container> */}
          <Footer/>
      </BackgroundContainer>
    </BrowserRouter>
  );
}

具有图像背景的组件

   import Image from '../assets/spotify.jpg'

const StyledLogoContainer = styled.div `
   
    background: url(${Image}) no-repeat  center center fixed; 
    background-size: 100%;
    width: 100%;
    height: 100%;
    ${'' /* position:absolute; */}
    
  
  /* Logo */
`

如何将图片设置为div的背景？

0 个答案: