反应背景图像覆盖不透明度

【问题标题】：React background image overlay opacity反应背景图像覆盖不透明度
【发布时间】：2018-10-02 09:43:48
【问题描述】：

没有找到如何在 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>

【问题讨论】：

标签： reactjs css stylesheet

【解决方案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。

【讨论】：