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

Question

你好 Stack Overflow 社区，

我想为我的网站创建全屏背景图片，但我不知道是否应该将图片放在 1) 和 index.html 文件（在任何 React 组件之外），2) 在主 App 组件（最高父组件）内，或 3) 一级deeper：App 主组件中的一个组件。

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

我还附上了一张图片，大致了解了我要创建的内容。

谢谢！

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

Answer 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;
}

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

Should I place a full page background image in a react component?

css

background-image

reactjs