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

您可以考虑CSS变量。指定2个背景层，以后可以更改。您可以轻松缩放到任意数量的背景：

.container > div {  background:        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 ><div >...</div><div >...</div><div >...</div><div >...</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 ><div >...</div><div >...</div><div >...</div><div >...</div></div>