ReactJS 中的色调图像

Question

所以我有这个 React 组件，我在其中传递背景图像和它应该通过道具获得的颜色作为色调。它看起来像这样：

this.props.background = 'https://picsum.photos/650';
this.props.color = '#E74C3C';

<div style={{
                ...defaultStyle,
                background: 'url(' + this.props.background + '), linearGradient(' + this.props.color + ',' + this.props.color')'
            }}>

问题是它抛出一个错误，说它无法编译。你能告诉我如何使用 css 内联样式来应用色调吗？

Answer 1

您可以使用 rgba() 格式指定 linearGradient，但最好使用不透明度设置较低的覆盖容器，并在使用道具时传递色调颜色。我在 CodeSandBox 上使用覆盖构建了一个小示例 - View Sample