React组件中如何为背景图片叠加半透明白色遮罩？

问题原因 #

background 是CSS背景相关属性的简写语法，你在backgroundImage、backgroundPosition、backgroundSize之后定义background: 'rgba(255,255,255,0.5)'会直接覆盖前面所有背景相关配置，所以只会显示纯白色背景，原背景图完全被覆盖。

解决方案 #

使用CSS多层背景实现遮罩效果，将半透明白色的渐变层放在背景图上方即可，无需额外添加DOM节点，修改后的代码如下：

import background from "../images/pageBG2.png"; //import an image for bg use

var collectionWindowStyle = {
div:{
    // 多层背景顺序：先写的层叠在后面的层上方，第一层是0.6透明度的白色渐变，第二层是背景图
    backgroundImage: `linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url(${background})`,
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    color: "white",
    margin: "5px",
    padding: "5px",
},
h1:{
    color: "grey"
},
}

如果需要兼容更复杂的遮罩场景，也可以选择额外添加一个绝对定位的子节点作为遮罩层：父节点设置position: relative，遮罩层设置position: absolute; inset: 0; background: rgba(255,255,255,0.6); pointer-events: none;即可，不过上述多层背景的方案更简洁，适配当前需求。

内容的提问来源于stack exchange，提问作者Basil Nagle