如何在之前的背景图片上添加另一张背景图片？

Question

我有一个正在编写的CSS页面，需要在一个类中应用背景图片，并使用另一个类在已经存在的图片上放置一个部分透明的背景图片。这有点像文字沙拉，让我举个例子来演示一下。

html{
    <div class="background1">...</div>
    <div class="background1 backgroundFilter">...</div>
    <div class="background2">...</div>
    <div class="background2 backgroundFilter">...</div>
}
css {
    .background1 {
        background-image:url(...);
    }
    .background2 {
        background-image:url(...);
    }
    .backgroundFilter {
        background-image:url(...);
    }
}

在这个例子中，第一个div应该有背景图像1，第二个应该有背景图像1，但上面放置了过滤器图像，然后第三个应该是图像2，第四个应该是图像2，并且也带有相同的过滤器。

在这个例子中，然而.backgroundFilter会覆盖先前的图像而不是叠加它。

这是否可能，还是我需要为每个版本的背景图像制作不同的类？

- Kron

Answer 1

你可以考虑使用CSS变量。指定2个背景层，稍后可以更改。你可以轻松扩展到任意数量的背景：

.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>

您还可以考虑使用伪元素来实现新的背景，但由于我们只有2个伪元素，所以只能使用3个背景。

.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>

- Temani Afif

---

太棒了。谢谢伙计，第一个选项非常有效。 - Kron