【发布时间】：2013-01-04 15:05:22
【问题描述】：
有人知道使用 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 的“正确”使用，但在我看来，每个背景项目都是它自己的单元——对我来说，应该有一些特定的方式是有道理的单独修改每个单元......即使它在未来很遥远。
我会对任何带有这些讨论链接的答案感兴趣。
【问题讨论】：
-
我确定有人在mailing lists 中对此进行了讨论。
-
据我所知，背景不需要供应商前缀。我会选择“组合课程”
-
@One Trick Pony：我认为他指的是渐变前缀。
-
@OneTrickPony 好点，我指的是应用渐变。忽略了这一点。道歉。
-
好的，但这不会增加太多的 CSS 代码（一些额外的字节）。如果你使用像 SASS 或 Less 这样的预处理器，你仍然会拥有一个紧凑的源代码。
标签： css background-image