Angular如何动态修改多个CSS类的background-url属性？

首先需要先明确一个CSS基础规则：单个元素同时应用多个包含background属性的类时，CSS优先级更高的类的background会覆盖其他类的同属性，默认无法同时展示三个类的背景图。如果你的需求是修改这三个类的全局样式，或者为单个元素叠加多张背景图，可以参考以下实现方案：

方案1：用CSS自定义属性（变量）修改全局/局部类的背景 #

这是最符合Angular开发规范的实现方式，适配你要分别控制三个类背景地址的需求：

第一步：修改CSS类定义，引入CSS变量 #

/* 给每个类的background-url绑定自定义变量，同时可以设置默认值 */
.my-class-one {
  background: url(var(--img-one, './默认图1.png'));
}

.my-class-two {
  background: url(var(--img-two, './默认图2.png'));
}

.my-class-three {
  background: url(var(--img-three, './默认图3.png'));
}

第二步：在元素上绑定变量，调用你定义的获取地址方法 #

如果只需要修改当前这个元素上三个类的背景，直接在元素上绑定对应变量即可：

<div 
  class="my-class-one my-class-two my-class-three"
  [style.--img-one]="getImageUrlOne()"
  [style.--img-two]="getImageUrlTwo()"
  [style.--img-three]="getImageUrlThree()"
>
  ----
</div>

如果需要全局修改所有使用这三个类的元素的背景，把变量绑定在根组件或者body节点上即可。

方案2：单个元素叠加多张背景图 #

如果你需要在同一个元素上同时展示三张背景图，不需要拆分三个类，直接拼接多背景地址即可：

<div 
  [style.background]="`url(${getImageUrlOne()}), url(${getImageUrlTwo()}), url(${getImageUrlThree()})`"
>
  ----
</div>

多背景的展示顺序是写在前面的在上层，你可以根据需求调整顺序，也可以额外添加background-size、background-position等属性分别控制每张背景的样式。

方案3：动态切换类 #

如果你是需要根据状态切换元素使用的类，每个类对应独立的背景，可以用ngClass实现：

<div 
  [ngClass]="{
    'my-class-one': 条件1,
    'my-class-two': 条件2,
    'my-class-three': 条件3
  }"
>
  ----
</div>

你可以在对应的方法中控制三个条件的布尔值，实现类的动态切换。

内容的提问来源于stack exchange，提问作者Khairul Bashar Lemon