IT技术 - css 混合/模糊/合并背景图像 - 吾爱随笔录

我在一个网站上工作，这只是 ReactJS 中的一个演示：https ://poc-bio-meteo.netlify.com/

问题出在背景上。

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

现在我想在每个部分 (météo & 1 ; 1&2; 2&3) 之间做出很好的效果，如下所示：

那么如何使每个部分都在前一个部分的底部上方一些像素，并使其很好地融合在一起（就像我们可以在 photoshop 中使用 2 png 透明）。这种效果应该在css中完成，因为它应该从移动到宽屏都有。

以前我试过：

使用包含透明度的 3 个 png，它不适用于两个存在理由。PNG 太重了，它只显示精确的屏幕宽度。
通过在组件的底部/顶部添加一个相对区域Categorie，linear-gradient但渲染一点点难看

1) APP.JS

import Meteo from "./components/Meteo";
import Categorie from "./components/Categorie";

function App() {
  return (
    <div className="App">
      <h5 style={{ paddingLeft: 15 }}>Météo</h5>
      <header className="App-header">
        <Meteo />
        <Categorie name="air" display="Air" bgpos="bottom" {/* bottomOpacity*/} />

        <Categorie name="sol" display="Sol" bgpos="center"  {/*  bottomOpacity topOpacity*/} />

        <Categorie name="eau" display="Eau" bgpos="top" {/* topOpacity */}/>

      </header>
    </div>
  );
}

2) Category.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>
  );
}