Question

我希望在没有const的div的背景中有一个图像。我需要将图像作为背景图像，因此我可以在其上放置文本。我想避免在sass文件中硬编码背景图像。但是，我很好奇它是如何用sass文件编写的。

以下只是一张图片，而非背景图片：

class Card extends Component {

  render() {

    return (
      <div className='home-card-view flex-center'>

        <div>

          <img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />

          <h2 className='home-card-title'> Title </h2>
          <h4> Subtitle stuf that should explain more </h4>
        </div>

      </div>

    )
  }
}

export default Card

我可以在React的div中获得背景图片吗？如何在Sass文件中完成。

Answer 1

如果您想要执行此操作的元素很多，并且希望尽可能抽象出Sass文件和，那么您只能使用现代浏览器，那么您可以使用CSS自定义属性

在你的Sass文件中：

.home-card-image{
  background-image:url( var(--homeCardImage) );
  [background-position, size, etc...]
}

然后在React中，您只需将自定义属性设置为您想要的任何内容：

class Card extends Component {
  render() {    
    return (
      <div className='home-card-view flex-center'
           style='--homeCardImage: "YOUR-IMAGE-URL-HERE"'>    
        <div>    
          <h2 className='home-card-title'> Title </h2>
          <h4> Subtitle stuf that should explain more </h4>
        </div>    
      </div>    
    )
  }
}    
export default Card

你为什么要这样做？好吧，如果你想让自己做一些事情，而不仅仅是一个背景图片，你可以。例如，如果您想要使用渐变叠加层覆盖第二个背景图像，则可以在sass文件中执行此操作，如下所示：

.home-card-image{
  background-image:url( var(--homeCardImage) ), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5);
  [background-position, size, etc...]
}

您无需触及React组件。

Answer 2

只需将内联样式应用于要具有background-image属性的组件（如下所示）

gcc foo.s

如何在React Js中为div提供背景图像

2 个答案: