css 主要部分的背景图像

6ie5vjzr 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(198)

我正在写一个React web应用程序，我也使用Chakra-UI。一般来说，我有一个页眉，主要部分和页脚。
https://jsfiddle.net/7cmasxLq/

<div id="header">
  header
</div>

<div id="main">
  Main
</div>

<div id="footer">
  Footer
</div>

以及

#header {
  background-color: red;
}

#main {
  background-image: url('https://www.epfl.ch/schools/ic/wp-content/uploads/2019/02/EPFL-aerial-Rolex-towards-East-1920x1080.jpg');
}

#footer {
  background-color: yellow;
  padding: 10px 0;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;
}

所以页眉总是在顶部，页脚总是在底部。
现在对于着陆页，我想添加一个背景图像，跨越页眉和页脚之间的空间，但我不确定什么是最好的方法，特别是当使用Chakra-UI。
在我的例子中，我使用了background-image，但我读到过应该使用image元素，但鉴于我使用的是Chakra-UI，这更令人困惑。
什么是好的解决方案？

css

来源：https://stackoverflow.com/questions/75720624/background-image-for-main-section

2条答案

按热度按时间

eiee3dmh1#

这并不是脉轮特有的，但问题是你的主要内容没有填满空间--它只和里面的内容一样高。
要让它拉伸并填充空间，您可以使用flexbox：

body, html {
  /* Remove any margins so wrapper takes all space */
  margin: 0; 
}
.wrapper {
  /* full height the wrapper, and flex col so it's vertical */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: yellow;
}

.content {
  /* flex-grow the content so it takes any empty space in the wrapper */
  background: blue;
  flex-grow: 1;
}

.footer {
  background: green;
}

<div class="wrapper">

<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>

</div>

至于你的背景-或-图像问题，我喜欢使用背景在这情况-那是这是什么在这结束的一天！另外，如果背景doesn 't加载在你不结束到这一个丑陋的破碎的图像图标出现

赞(0）回复(0）举报 2023-03-14

ogsagwnx2#

我在Chakra-uiPlayground创建了一个简单的例子：play.chakra-ui.com
因此，你可以使用Box组件作为页眉、主页面和页脚的主要构建块，也可以为Box添加背景图片。

import { Button, Box } from '@chakra-ui/react'

export const App = () => {
   return (
    <Box display="grid" gridTemplateRows="auto 1fr auto" minHeight="100vh">
      <Box id="header" bg="red">
        Header
      </Box>

      <Box
        id="main"
        bgImage="url('https://www.epfl.ch/schools/ic/wp-content/uploads/2019/02/EPFL-aerial-Rolex-towards-East-1920x1080.jpg')"
        bgSize="cover"
        bgPosition="center"
      >
        <Box>Main</Box>
      </Box>

      <Box id="footer" bg="yellow" py="10px" position="fixed" left="0" bottom="0" width="100%" textAlign="center">
        Footer
      </Box>
    </Box>
  );
}

赞(0）回复(0）举报 2023-03-14

我来回答

css 主要部分的背景图像

2条答案

相关问题

热门标签

最新问答