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

Question

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

问题在于背景。

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

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

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

之前我试过：

1. 有 3 个包含透明度的 png，它不适用于两个理由。 PNG太重了，它只显示了一个精确的屏幕宽度。
2. 通过在组件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) 分类.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>
  );
}

Answer 1

这可以使用掩码来完成。

这是一个简化的例子：

.box {
  height:60vh;
  font-size:50px;
  text-align:center;
  color:#fff;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  top:-50px;
  bottom:-50px;
  background:var(--img) center/cover;
  -webkit-mask:linear-gradient(transparent ,#fff 50px calc(100% - 50px),transparent);
          mask:linear-gradient(transparent ,#fff 50px calc(100% - 50px),transparent);
}

<div class="box" style="--img:url(https://picsum.photos/id/1002/800/800.jpg)">text 1</div>
<div class="box" style="--img:url(https://picsum.photos/id/109/800/800.jpg)">text 2</div>
<div class="box" style="--img:url(https://picsum.photos/id/107/800/800.jpg)">text 3</div>
<div class="box" style="--img:url(https://picsum.photos/id/177/800/800.jpg)">text 4</div>