CSS混合/模糊/合并背景图片 [英] css blend/blur/merge backgrounds images

问题描述

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

现在我想产生很好的效果在每个部分之间（météo& 1; 1& 2; 2& 3）像这样：

因此，如何使每个部分在上一个部分的底部超过某个像素，并使其很好地融合在一起（就像我们可以在透明的Photoshop中使用2 png一样） 。这种效果应该在css中完成，因为它应该存在于移动设备和宽屏之间。

以前我尝试过：

1. 具有3个包含透明性的png，它不能用于两个存在。 PNG太重了，它只显示了精确的屏幕宽度。


2. ，在组件 Categorie 的底部/顶部添加相对区域，并使用 linear-gradient 但略显丑陋

1）APP.JS

 从 ./components/Meteo导入Meteo； 
从 ./components/Categorie导入Categorie； 
 
函数App（）{
 return（
< div className = App> 
< h5 style = {{paddingLeft：15}}> ;Météo< / h5> 
< header className = App-header> 
< Meteo /> 
<类别名称= air display = Air bgpos =底部 {/ * bottomOpacity * /} /> 
 
<类别名称= sol display = Sol bgpos = center {/ * bottomOpacity topOpacity * /} /> ; 
 
<类别名称= eau display = Eau bgpos = top {/ * topOpacity * /} /> 
 
< / header> 
< / div> 
）; 
} 
  

2）Categorie.js

  const useStyles = makeStyles（theme =>（{{
 root：{
 flexGrow：1 
}，
 leftText： {
 textAlign：左，
宽度：自动，
显示：行内块 
}，
响应：{
宽度： 100％，
 maxWidth： 1000px，
高度： auto 
}，
容器：{
显示： flex，
 flexDirection：列，
 alignItems： center，
 justifyContent： center 
}，
 overlay：{
 backgroundColor： rgba（13 ，53,78，0.6），
 
颜色：白色，
位置：相对 
}，
 
 top不透明度：{
位置：绝对，
顶部：-2，
宽度： 100％，
高度：75，
背景： linear-gradient（到顶部，透明，rgba（13,53,78,0.9）），
 backgroundRepeat：无重复 
}，
 bottomOpacity：{
位置： absolute， 
底部：-2，
宽度： 100％，
高度：75，
背景：
 linear-gradient（到底部，透明，rgba（13 ，53,78，0.9））），
背景重复： no-repeat 
}，
 
 padding：{
 padding： auto，
 paddingTop：85，
 paddingBottom：85 
} 
}））; 
 
导出默认函数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}> 
 ...内容
< ; / div> 
 {props.bottomOpacity&&< div className = {classes.bottomOpacity} />} 
< / div> 
< / div> 
）; 
} 
  

解决方案

可以使用遮罩来完成。

这是一个简化的示例：

 。 box {
 height：60vh; 
 font-size：50px; 
 text-align：center; 
颜色：#fff; 
头寸：相对； 
 z-index：0; 
} 
 .box：之前{
 content：; 
头寸：绝对； 
 z-index：-1;剩余
：0： 
对：0; 
 top：-50px; 
 bottom：-50px; 
 background：var（-img）center / cover; 
 -webkit-mask：线性渐变（透明，＃fff 50px calc（100％-50px），透明）; 
 mask：linear-gradient（transparent，＃fff 50px calc（100％-50px），transparent）; 
}  

 < div class = box  style = --img：url（https://picsum.photos/id/1002/800/800.jpg）>文本1< / div> 
< div class = box style = --img：url（https://picsum.photos/id/109/800/800.jpg）>文本2< / div> 
< div class = box style = --img：url（https://picsum.photos/id/107/800/800.jpg）>文本3< / div> 
< div class = box style = --img：url（https://picsum.photos/id/177/800/800.jpg）>文本4< / div>  

I work on a website, this is just a demo here in ReactJS : https://poc-b-i-o-meteo.netlify.com/

The probleme is with the background.

The concept is easy, the app is composed with 4 parts, the top with meteo with no background and 3 parts each on with a different background. The app must be mobile & responsive, each part have different content so different height.

Now i want to make a nice effect between each part (météo & 1 ; 1&2; 2&3) like this :

So how to make each part to be over the bottom of the previous part for some pixel and to make it blend together nicely (like we can do with 2 png in photoshop with transparence ). This effect should be done in css because it should be there from mobile to wide screen.

Previously i tried :

1. with 3 png who contained transparence, it doesn't work for two raison. PNG are SOOOOO heavy and it shown only a precise screen width.
2. by adding a relative zone to bottom/top of the component Categorie with linear-gradient but render little ugly

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>
  );
}

解决方案

this can be done using mask.

Here is a simplified example:

.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混合/模糊/合并背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！