image - ReactJS 中的图像着色

Question

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

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，但最好使用不透明度设置较低的覆盖容器，并使用 props 传递色调颜色。我在 CodeSandBox 上使用覆盖构建了一个小示例 - View Sample