使用JS设置多背景图层级（替代z-index）及背景图不显示问题解决

• 最核心的致命错误：JS字符串引号嵌套冲突
  原有代码中写的element.style.backgroundImage = "url("http://placekitten.com/200/200")" 这类赋值，外层用双引号包裹整个字符串，内部给url地址也套了双引号，JS解析时碰到第一个内部双引号就会认为字符串已经结束，直接抛出语法错误，导致整个JS脚本中断运行，所有背景设置逻辑完全不生效，自然看不到任何图片。
• 多背景层级规则适配
  CSS原生多背景特性完全支持你想要的层级控制能力：逗号分隔的背景列表中，排在越靠前的图片渲染层级越高，不需要给背景图单独设置z-index，依靠列表顺序就能实现层级叠放，你的原始实现思路是完全可行的。
• 细节缺失：多背景参数适配
  单图场景下配置的background-size、background-position、background-repeat，在多图场景下需要和背景列表的顺序一一对应，否则会出现图片变形、位置偏移、重复平铺的异常显示。

修正后的背景设置函数 #

function newBackGround(element, background, box) {
  // 获取当前元素已设置的背景值，无值时默认为空
  const currentBg = element.style.backgroundImage;
  if (currentBg === "" || currentBg === "none") {
    element.style.backgroundImage = `url('${background}')`;
    return;
  }
  if (box.type !== "normal") {
    // 高优先级图片放在列表最前端，原有底层背景保留在后方
    const highLevelImage = `url('${box.highLevelImg}')`;
    element.style.backgroundImage = `${highLevelImage}, ${currentBg}`;
  } else {
    // 普通类型直接替换底层背景，清空原有的叠加层
    element.style.backgroundImage = `url('${background}')`;
  }
}

适配多图的CSS调整 #

td {
  border: 1px solid black;
  width: min(calc(30vw), calc(30vh));
  height: min(calc(10vw), calc(10vh));
  background-color: black;
  text-align: center;
  color: #FF9800;
  font-size: 100%;
  /* 参数顺序和背景列表一一对应，支持2层图片叠加 */
  background-size: contain, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
}

• 不需要为每张图片单独配置类名，所有图片的来源、叠放顺序都可以通过JS动态拼接backgroundImage字符串实现。
• 只需要在CSS中预留对应层数的通用背景参数，所有业务逻辑通过传入的box对象做判断，完全可以覆盖全量图片的展示需求。

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