更新时间:2023-02-06 08:28:32
可以考虑CSS变量.指定 2 个您可以稍后更改的背景图层.您可以轻松扩展到任意数量的背景:
You can consider CSS variables. Specify 2 background layer that you can change later. You can easily scale to any number of background:
.container > div {
background:
/*we make the default value a transparent image*/
var(--im1,linear-gradient(transparent,transparent)),
var(--im2,linear-gradient(transparent,transparent));
height:200px;
width:200px;
display:inline-block;
}
.background1 {
--im2: url(https://picsum.photos/200/300?image=0);
}
.background2 {
--im2: url(https://picsum.photos/200/300?image=1069);
}
.backgroundFilter {
--im1: linear-gradient(to right,transparent,green);;
}
<div class="container">
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
</div>
您也可以考虑为新背景添加一个伪元素,但您只能使用 3 个背景,因为我们只有 2 个伪元素:
You can also consider a pseudo element for the new background but you are limited with only 3 backgrounds since we have only 2 pseudo elements:
.container > div {
height:200px;
width:200px;
display:inline-block;
position:relative;
z-index:0;
}
.background1 {
background: url(https://picsum.photos/200/300?image=0);
}
.background2 {
background: url(https://picsum.photos/200/300?image=1069);
}
.backgroundFilter::before {
content:'';
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(to right,transparent,green);;
}
<div class="container">
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
</div>