我应该在React组件中放置整页的背景图片吗? [英] Should I place a full page background image in a react component?

问题描述

Hello Stack Overflow社区，

Hello Stack Overflow community,

我正在为网站创建全屏背景图像，但是我不确定是否应该将图像放置在 1) index.html文件中(在任何其他文件之外) React组件)，位于主App组件内的 2)(最高父组件)或 3)更深一层:主App组件内的组件.

I'm looking to create a full screen background image for my site, yet I can't figure out if I should place the image in 1) the index.html file (outside of any React components), 2) inside the main App component (the highest parent component), or 3) one level deeper: a component inside the main App component.

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

Not sure if this makes sense? Let me know if you have any clarifying questions. I've search a ton online, but haven't found any solid answers.

我还附加了一张图像，该图像具有我要创建的图像的大致概念.

I've also attached an image with a general idea of what I'm looking to create.

谢谢！

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

*The file structure I'm working with was created with create-react-app. I know I probably don't need to use React for the site pictured below, but it's for practice.

推荐答案

如果该图像用作您计划渲染的所有组件的背景，则只需将其添加到index.html页面，或更恰当地，添加类似以下内容的内容到index.css并将其导入到index.js

If the image serves as background to all components you plan to render, just add it to the index.html page, or more properly, add something like the following to index.css and import it into 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;
}

这篇关于我应该在React组件中放置整页的背景图片吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！