css - react 背景图片不显示图片

Question

   <Slider
      className="slides"
      style={{
        padding: 0, background: '#eee', maxHeight: '500px',
      }}
      {...settings}
    >
      <div style={{ backgroundImage: `url(${xd2})` }} />
      <div>
      <img style={{ width: "100%", maxHeight: '100%' }} src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg"/>
      </div>
      <div style={{ margin: 0, width: "100%", height: '100%' }}>
      <img style={{ margin: 0 }} src="https://media.geeksforgeeks.org/wp-content/uploads/20190719161411/cat1-225x300.jpg"/>
      </div>
    </Slider>

我尝试将一张图片与背景图片放在一起，但不显示图片

有了这个：


  <div style={{ backgroundImage: url（$ {xd2}）}} />


我的输入是正确的

Answer 1

您可能看不到背景，因为div没有宽度/高度。如果添加height: "100%"（或背景的适当高度），则应该看到它，并假定xd2的值是指向图像的有效URL。在此处查看具有内联样式的背景图像的工作示例：https://codesandbox.io/s/quirky-hamilton-q5dhj