reactjs - react 背景图像叠加不透明度

Question

没有找到如何在 reactjs 中设置背景图像覆盖不透明度的方法，我正在尝试做类似的事情。

款式

const styles={ 
 header:{ 
 background: 'rgba(0, 0, 0, 0.5)', 
 backgroundImage:url(${background}),
 height: '100vh', 
 backgroundPosition:'center', 
 backgroundRepeat: 'no-repeat',
 backgroundSize: 'cover' 
 }
}

JSX

<div style={styles.header}>
      <div>
        Portfolio
      </div>
</div>

Answer 1

您应该向内部块添加样式并在那里设置背景颜色。
另外，我建议您使用字符串模板为 backgroundImage 设置有效值。风格。

我们到了:

const styles = {
  header: {
    backgroundImage: `url(${background})`,
    height: '100vh',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover'
  },

  content: {
    height: '100%',
    width: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  }
}

<div style={styles.header}>
  <div style={styles.content}>
     Portfolio
  </div>
</div>

示例代码 here .