如何在先前的背景图像之上添加背景图像? [英] How to add a background image on top of a previous background image?

问题描述

我有一个正在编写的CSS页面，我需要在一个类中应用背景图像，然后使用另一类将一个局部透明的背景图像放在已经存在的背景图像之上.这话不多说，所以让我做一个示范.

I have a css page that I am writing and I need to apply a background image in one class and then use a different class to put a partially transparent background image on top of the one that is already there. That is a bit of a word salad so let me give a bit of a demonstration.

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对其进行过滤.

In this example the first div should have background image 1, the second should have background image 1 but with the filter image placed on top of it, then the third should be image 2 and the fourth should be image 2 with the same filter on it.

但是在此示例中，.backgroundFilter会覆盖前一张图片，而不是覆盖它.

In this example however .backgroundFilter would be overwriting the previous image instead of overlaying it.

这是可能的吗，或者我需要为每个版本的背景图像制作一个不同的类吗?

Is this possible or do I need to make a different class for each version of the background image?

推荐答案

您可以考虑使用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>

您还可以考虑将新背景用作伪元素，但是由于我们只有2个伪元素，因此您只能使用3个背景:

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>

这篇关于如何在先前的背景图像之上添加背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！