我应该在 React 组件中放置整页背景图像吗?

IT技术 css reactjs background-image
2021-05-13 12:47:37

你好 Stack Overflow 社区,

我想为我的网站创建一个全屏背景图像,但我不知道是否应该将图像放在1) index.html 文件中(在任何 React 组件之外),2)在主应用程序中组件(最高父组件),或3)更深一层:主 App 组件内的组件。

不确定这是否有意义?如果您有任何澄清问题,请告诉我。我在网上搜索了很多,但没有找到任何可靠的答案。

我还附上了一张图片,其中包含我要创建的内容的总体思路。

谢谢!

*我正在使用的文件结构是使用 create-react-app 创建的。我知道我可能不需要为下图所示的站点使用 React,但它是用于练习的。

页面样机

1个回答

如果图像作为您计划渲染的所有组件的背景,只需将其添加到index.html页面,或者更恰当地说,添加如下内容index.css并将其导入index.js

body {
  margin: 0;
  padding: 0;

  /** background image */
  background-image: url("./img/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}