css blend/blur/merge 背景图片

Question

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

问题出在背景上。

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

现在我想在每个部分 (météo & 1 ; 1&2; 2&3) 之间做一个很好的效果，就像这样：

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

之前我试过:

有3个png包含透明，它不适用于两个理由。 PNG 太重了，它只显示了精确的屏幕宽度。
通过 linear-gradient 组件 Categorie 的 bottom/top 添加一个相对区域 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) 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>
  );
}

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>

css blend/blur/merge 背景图片

css blend/blur/merge backgrounds images

html

css

blurry

reactjs