如何在先前的背景图像之上添加背景图像？

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，第二个div应该具有背景图像1，但是滤镜图像位于其顶部，然后第三个div应该是图像2，第四个应该是图像2并且上面具有相同的滤镜。

但是，在此示例中，.backgroundFilter将覆盖之前的图像，而不是覆盖它。

这是否可能，或者我需要为每个版本的背景图像设置不同的类吗？

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>