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

編輯：這可能超出了問題的范圍，但是我建議您在其他地方聲明樣式對象，並在每次您希望具有相同背景效果時將其導入，以便於重用。

Answer 2

這與ReactJS無關，而只是CSS問題。 您應該使用background-size:cover而不是background-position因為background position屬性設置背景圖像的起始位置，而不是設置圖像的大小。