我在一個網站上工作，這只是 ReactJS 中的一個演示： https: //poc-bio-meteo.netlify.com/問題在于背景。這個概念很簡單，該應用程序由 4 個部分組成，頂部是沒有背景的meteo，另外 3 個部分有不同的背景。該應用程序必須是移動且響應式的，每個部分都有不同的內容，因此高度也不同?，F在我想在每個部分（météo & 1; 1&2; 2&3）之間做出很好的效果，如下所示：那么如何使每個部分都位于前一個部分的底部的某個像素上，并使其很好地融合在一起（就像我們可以在 Photoshop 中使用 2 個 png 和透明度一樣）。這種效果應該在 css 中完成，因為它應該從移動設備到寬屏幕都存在。以前我嘗試過：對于包含透明的 3 個 png，它不適用于兩個存在的理由。PNG 太重了，而且它只顯示了精確的屏幕寬度。通過在組件的底部/頂部添加一個相對區域，Categorie但linear-gradient渲染得有點難看1) 應用程序.JSimport 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）類別.jsconst 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  }}));