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