Html css混合/模糊/合并背景图像

我在一个网站上工作，这只是ReactJS中的一个演示：

问题在于背景

这个概念很简单，这个应用程序由4个部分组成，顶部有没有背景的meteo，3个部分各有一个不同的背景。该应用程序必须是移动和响应，每个部分都有不同的内容，因此高度不同

现在我想在每个部分（météo&1；1&2；2&3）之间创建一个很好的效果，如下所示：

因此，如何使每个部分位于前一部分的底部，以获得一些像素，并使其很好地混合在一起（就像我们可以在photoshop中使用透明的2PNG）。这种效果应该在css中实现，因为它应该在移动设备和宽屏上都有

以前我试过：

对于3个包含透明性的png，它不适用于两个理由。PNG太重了，只显示了精确的屏幕宽度

通过向组件的底部/顶部添加一个相对区域，使用

线性渐变
进行分类
，但渲染得不太难看

1） APP.JS

从“/components/Meteo”导入Meteo；
从“/components/Category”导入分类；
函数App（）{
返回(
梅托
);
}

2） Categorie.js

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  leftText: {
    textAlign: "left",
    width: "auto",
    display: "inline-block"
  },
  responsive: {
    width: "100%",
    maxWidth: "1000px",
    height: "auto"
  },
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
  },
  overlay: {
    backgroundColor: "rgba(13,53,78, 0.6)",

    color: "white",
    position: "relative"
  },

  topOpacity: {
    position: "absolute",
    top: -2,
    width: "100%",
    height: 75,
    background: "linear-gradient( to top, transparent , rgba(13,53,78,0.9 ) )",
    backgroundRepeat: "no-repeat"
  },
  bottomOpacity: {
    position: "absolute",
    bottom: -2,
    width: "100%",
    height: 75,
    background:
      "linear-gradient( to bottom, transparent , rgba(13,53,78, 0.9 ) )",
    backgroundRepeat: "no-repeat"
  },

  padding: {
    padding: "auto",
    paddingTop: 85,
    paddingBottom: 85
  }
}));

export default function Categorie(props) {
  const classes = useStyles();

  let ref = useRef(null);
  let size = useComponentSize(ref);
  let { width, height } = size;

  const filename = {
    air: "air.jpg",
    eau: "eau.jpg",
    sol: "sol.jpg"
  };

  let backgd = {
    backgroundImage: `url('./photos/${filename[props.name]}')  `,
    backgroundPosition: props.bgpos || "center",
    backgroundSize: "cover",
    backgroundRepeat: `${width}px ${height}px`,
    width: "100%"
  };

  return (
    <div style={backgd} ref={ref}>
      <div className={classes.overlay}>
        {props.topOpacity && <div className={classes.topOpacity} />}
        <div className={classes.padding}>
          ... CONTENT
        </div>
        {props.bottomOpacity && <div className={classes.bottomOpacity} />}
      </div>
    </div>
  );
}

const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1
},
左文本：{
textAlign：“左”，
宽度：“自动”，
显示：“内联块”
},
响应：{
宽度：“100%”，
最大宽度：“1000px”，
高度：“自动”
},
容器：{
显示：“flex”，
flexDirection:“列”，
对齐项目：“中心”，
为内容辩护：“中心”
},
覆盖：{
背景色：“rgba（13,53,78,0.6）”，
颜色：“白色”，
职位：“相对”
},
拓扑容量：{
位置：“绝对”，
顶部：-2，
宽度：“100%”，
身高：75，
背景：“线性梯度（到顶部，透明，rgba（13,53,78,0.9））”，
背景重复：“不重复”
},
底部不透明度：{
位置：“绝对”，
底部：-2，
宽度：“100%”，
身高：75，
背景：
“线性梯度（至底部，透明，rgba（13,53,78,0.9））”，
背景重复：“不重复”
},
填充：{
填充：“自动”，
paddingTop:85，
垫底：85
}
}));
导出默认功能类别（道具）{
const classes=useStyles（）；
设ref=useRef（null）；
let size=useComponentSize（参考）；
设{宽度，高度}=尺寸；
常量文件名={
air:“air.jpg”，
eau：“eau.jpg”，
溶胶：“sol.jpg”
};
让我们回到Gd={
背景图片：`url（'./photos/${filename[props.name]}'）`，
背景位置：props.bgpos | | |“中心”，
背景尺寸：“封面”，
背景重复：`${width}px${height}px`，
宽度：“100%”
};
返回(
{props.topocapacity&&}
…内容
{props.bottomOpacity&&}
);
}

这可以使用掩码来完成

以下是一个简化的示例：

.box{
高度：60vh；
字体大小：50px；
文本对齐：居中；
颜色：#fff；
位置：相对位置；
z指数：0；
}
.盒子：以前{
内容：“；
位置：绝对位置；
z指数：-1；
左：0；
右：0；
顶部：-50px；
底部：-50px；
背景：var（--img）中心/盖；
-webkit遮罩：线性梯度（透明，#fff 50px计算（100%-50px），透明）；
遮罩：线性梯度（透明，#fff 50px计算（100%-50px），透明）；
}

text 1
文本2
文本3
text 4

代码执行我需要的操作。你知道如何在reactjs中使用：：before吗？这可以用两个不同的类名代替之前的box+来完成吗？@AlainIb是的，在您的div（另一个div）中添加一个额外的元素，然后在instead中对其应用CSS。您还可以删除CSS变量并将背景用作内联样式对不起，您有没有示例？我得到空白屏幕，因为相对位置在框类真的很抱歉坚持。由于绝对值，它仍然是get隐藏元素。你能看一看吗？thanks@AlainIb您的问题是高度的使用：100%，请检查以下内容：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  leftText: {
    textAlign: "left",
    width: "auto",
    display: "inline-block"
  },
  responsive: {
    width: "100%",
    maxWidth: "1000px",
    height: "auto"
  },
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
  },
  overlay: {
    backgroundColor: "rgba(13,53,78, 0.6)",

    color: "white",
    position: "relative"
  },

  topOpacity: {
    position: "absolute",
    top: -2,
    width: "100%",
    height: 75,
    background: "linear-gradient( to top, transparent , rgba(13,53,78,0.9 ) )",
    backgroundRepeat: "no-repeat"
  },
  bottomOpacity: {
    position: "absolute",
    bottom: -2,
    width: "100%",
    height: 75,
    background:
      "linear-gradient( to bottom, transparent , rgba(13,53,78, 0.9 ) )",
    backgroundRepeat: "no-repeat"
  },

  padding: {
    padding: "auto",
    paddingTop: 85,
    paddingBottom: 85
  }
}));

export default function Categorie(props) {
  const classes = useStyles();

  let ref = useRef(null);
  let size = useComponentSize(ref);
  let { width, height } = size;

  const filename = {
    air: "air.jpg",
    eau: "eau.jpg",
    sol: "sol.jpg"
  };

  let backgd = {
    backgroundImage: `url('./photos/${filename[props.name]}')  `,
    backgroundPosition: props.bgpos || "center",
    backgroundSize: "cover",
    backgroundRepeat: `${width}px ${height}px`,
    width: "100%"
  };

  return (
    <div style={backgd} ref={ref}>
      <div className={classes.overlay}>
        {props.topOpacity && <div className={classes.topOpacity} />}
        <div className={classes.padding}>
          ... CONTENT
        </div>
        {props.bottomOpacity && <div className={classes.bottomOpacity} />}
      </div>
    </div>
  );
}