Javascript 如何使用reactjs样式在CSS中设置完整的背景图像？

这里我有一个div这个div图像我想在整个背景上设置，但它没有设置完整的背景（见下面的屏幕截图）。我的项目正在使用reactjs。如何在整个背景中设置图像

---

您要查找的CSS属性是

背景大小

，而不是

背景位置

。我通常使用的代码片段是：

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

或与反应

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

---

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

这与ReactJS无关，而只是CSS问题。

---

您应该使用

background size:cover

而不是

background position

，因为background position属性设置背景图像的起始位置，但不设置图像的大小。

backgroundSize

，而不是

backgroundPosition

。这主要是关于不知道使用哪个CSS规则，与React无关。可能重复：。不关闭，因为这是在CSS上，这篇文章是在React上。你可以看看这里一个类似的问题@SergiuParaschiv我使用backgroundSize，所以我的图像变得模糊如何停止模糊背景image@DDD，是因为你的图像太小而无法拍摄封面尺寸，还是因为你的图像有模糊效果（photoshop或CSS属性）？我参考了你的答案，它是有效的，但我的图像变模糊了如何停止变模糊image@DDD那是因为你的形象太小了。也许你需要买一个大一点的

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