如何使用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})`,
}} />

编辑：这可能超出了问题的范围，但是我建议您在其他位置声明样式对象，并在每次希望具有相同背景效果的情况下将其导入，以确保可重用性< / p>

Answer 2

这与ReactJS无关，而只是CSS问题。 您应该使用background-size:cover而不是background-position，因为背景位置属性会设置背景图片的开始位置，而不是设置图片的大小。