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

【问题标题】：How to set a full background image in CSS using reactjs style?如何使用 reactjs 样式在 CSS 中设置完整的背景图像？
【发布时间】：2019-03-19 09:48:14
【问题描述】：

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

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

【问题讨论】：

backgroundSize，而不是backgroundPosition。这主要是不知道使用哪个 CSS 规则，与 React 无关。
可能重复：stackoverflow.com/questions/22887548/…。没有关闭，因为这是在 CSS 上，而且这篇文章是在 react
你可以在这里看看类似的问题stackoverflow.com/a/39196525/8425297
@SergiuParaschiv 我使用 backgroundSize 所以我的图像变得模糊如何停止以模糊背景图像
@DDD，是因为你的图片太小而无法覆盖封面尺寸，还是你的图片有模糊效果（photoshop 或 CSS 属性）？

标签： javascript css reactjs background-image

【解决方案1】：

您要查找的 CSS 属性是 background-size，而不是 background-position。我通常用于执行此操作的 sn-p 是：

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})`,
}} />

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

【讨论】：

我参考你的答案它可以工作，但我的图像变得模糊如何停止模糊图像
@DDD 那是因为你的图片太小了。也许你需要买一个更大的

【解决方案2】：

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

【讨论】：