有人知道使用 CSS 更改多层背景的一层的方法吗？
我一直在四处寻找，但找不到任何提及当前甚至提议的未来规范的内容。我的想法是可能不会有，但是现在网络如此庞大，我确信某个地方的某个人拥有这些信息或讨论的链接。
以下示例在应用于不同元素时显然会在优先顺序方面存在问题：
.building-texture {
background: transparent, url(image/building-side.png);
}
.shade-dark {
background: url(image/shade-dark.png), unchanged;
}
.shade-mid {
background: url(image/shade-mid.png), unchanged;
}
.shade-light {
background: url(image/shade-light.png), unchanged;
}
<div class="building-texture shade-dark"></div>
显然，上面有许多解决方法，但没有一个是理想的，尤其是当您开始谈论许多不同的“层状态”和许多不同的“纹理”时：
初步解决方案
组合班
这是最理想的后备方案，但是当您开始考虑供应商前缀并处理两个以上的层时，它会变得很荒谬。
.building-texture-shade-dark {
background: url(image/shade-dark.png), url(image/building-side.png);
}
.building-texture-shade-mid {
background: url(image/shade-mid.png), url(image/building-side.png);
}
.building-texture-shade-light {
background: url(image/shade-light.png), url(image/building-side.png);
}
单独的元素
在本地运行一些测试时，我发现多层背景比使用子元素执行得更快。事实上，对于大多数现代浏览器来说，即使引入一个简单的孩子（没有应用背景）也会大大减慢渲染速度。
<div class="building-texture">
<div class="shade-dark"></div>
</div>
JavaScript 生成
为了克服手动输入第一个选项（组合类）的痛苦，可以使用 JavaScript 来生成样式表。但是你仍然有长类名的尴尬。另外，当您想要更改组合类的一个应用效果（例如删除阴影）时，您必须编写脚本以根据命名约定确定如何执行此操作。
通过 JavaScript 设置样式属性
另一种选择是通过.style每个元素动态重写整个背景。我还没有对此进行测试，但我的头脑告诉我这将是相当低效的，因为我确信浏览器在处理预设类时能够进行相当多的优化（即通过按分类对元素渲染进行分组）。虽然我可能是错的。
为什么...
我正在玩 CSS 3D 变换（启用透视）以及如何以简单快速的方式最好地纹理/照亮此类结构（示例代码）：
（来源：pebbl.co.uk）
在未能生成我满意的 CSS 解决方案后，我目前正朝着基于 Canvas 的解决方案前进，该解决方案将预先构建我可能想要的所有纹理以及它们不同的阴影状态，然后生成缓存数据 URI附加为单层背景。我的测试表明这是最佳的。但是，我真的很想使用尽可能多的基于浏览器的原生解决方案，因为使用画布涉及更多的代码，而且，因为今天的浏览器改进得如此之快，重新发明任何轮子、引擎、或道路网络。
即使可能被认为我所做的不是对 CSS 的“正确”使用，在我看来，每个背景项目都是它自己的单元——对我来说，应该有一些指定的方式来修改每个背景项目是有道理的单独的单元......即使它在未来很遥远。
我会对任何带有这些讨论链接的答案感兴趣。