javascript - 如何使用 reactjs 样式在 CSS 中设置完整的背景图片？

Question

这里我有一个 div 我想在整个背景上设置这个 div 图像，但它没有设置完整背景(见下面的屏幕截图)。我的元素正在使用 reactjs。如何设置全背景图片？

<div
   style={{
      backgroundImage: `url(${defaultImages.backgroundOfImage})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'cover',
   }}
  >
</div>

Answer 1

您要查找的 CSS 属性是 background-size，而不是 background-position。我通常用于执行此操作的代码段是:

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(path/to/image);

或者用 React

<div style={{
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
  backgroundImage: `url(${pathToImage})`,
}} />

编辑:这可能超出了问题的范围，但我建议您在其他地方声明样式对象并在每次您想要具有相同背景效果时导入它以实现可重用性