如何将含背景图与线性渐变的CSS背景样式拆分为两个独立类？

嘿，这事儿不难搞定！你想要把复合背景里的渐变单独拆成一个类，同时保留那两张图片的背景类对吧？首先得纠正一个小误区：你原来写的.a里重复用background-image会覆盖掉之前的，所以两张图片背景得合并成一个background-image声明，用逗号分隔才行。而且我们得保证三个背景层（image1在上、image2居中、渐变在最底层）都保留，不能互相覆盖。

下面给你两种靠谱的实现方式：

方案一：使用CSS自定义属性（推荐，更直观易维护） #

这种方式用自定义变量来复用图片背景的声明，后续修改图片路径或者新增图片层都很方便：

/* 负责两张图片背景的类 */
.image-layers {
  --background-images: url('image1.png'), url('image2.png');
  background-image: var(--background-images);
  background-position: center 50%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

/* 负责渐变背景的类 */
.gradient-layer {
  /* 先复用图片类的背景层，再追加渐变层（渐变会自动处于最底层） */
  background-image: var(--background-images, none), linear-gradient(#000000, #ffffff);
}

使用时，把两个类同时加到目标元素上即可：

<div class="image-layers gradient-layer"></div>

方案二：利用inherit关键字 #

如果不想用自定义属性，也可以通过继承来合并背景层，注意类的应用顺序就行：

/* 渐变类：先加载，作为最底层背景 */
.gradient-layer {
  background-image: linear-gradient(#000000, #ffffff);
}

/* 图片类：继承渐变层，再追加两张图片层 */
.image-layers {
  background-image: url('image1.png'), url('image2.png'), inherit;
  background-position: center 50%, 100% 100%, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

使用时要先加渐变类，再加图片类（保证继承生效）：

<div class="gradient-layer image-layers"></div>

两种方案都能完美还原你原复合背景的效果，而且完全满足你把渐变单独放在一个类里的需求~

内容的提问来源于stack exchange，提问作者FeKuLa