我即将构建一个设计，它涉及相当多的纹理背景，这些背景使用相同的羊皮纸图案，但颜色不同。显然，我可以为每种颜色创建和导出不同的平铺背景图像，但我想知道创建单个单色图案是否可以更聪明，我可以叠加具有必要块背景颜色的元素。
我的问题是，从性能的角度来看，这种方法是否可以。我以前对小元素做过这个，但我想知道在许多元素上使用这种技术是否会慢得令人无法接受，例如网站的背景、给定页面上的几个div、按钮等。经验告诉我，较旧的浏览器在太多的 png alpha 上有点窒息（尽管这个项目是 IE8+，幸运的是）。
有什么想法吗？
编辑：当我谈论性能时，我主要关心的不是下载时间，而是实际的页面渲染性能。我注意到 alpha PNG 过去落后于某些浏览器，因此即使是小的平铺纹理的广泛使用也可能导致类似的问题（我推测）。
在此阶段，下载性能不是问题。
性能是什么？如果性能为加载，那么使用更少的文件将加快速度。如果滚动的性能，这将取决于您如何构建它和您的目标受众。
几年前，我建立了一个拥有美国观众的网站，并使用了覆盖纯色的单色透明PNG。我在很多机器上对此进行了测试。唯一的显示性能问题是，如果某些内容滚动到其他未滚动的内容的顶部。例如，如果您覆盖了两个图案，并且一个滚动，但另一个滚动，那么您将在较慢的机器和移动设备上看到一些重绘问题。
这仅适用于少数元素，包括页面背景。如果您将其应用于每页的数十个元素，则可能会开始在旧计算机上显示问题。但它仍然比例如带有转换的大型 JS 滑块的资源密集度更低。
我强烈建议使用单色图案。我建议这样做是因为，在这种情况下，浏览器只加载一个图像文件，而不是在另一种选择中加载多个文件。如果您的网站很小并且没有获得太多流量，那么它可能无关紧要，但是优化您所做的工作量始终是一种很好的做法。
从性能的角度来看，我会说坚持使用不同颜色的相同羊皮纸图案。我同意你的解决方案更干净 - 这就是我更喜欢的 - 但你只会疏远那些可能在客户端收到性能下降的用户（使用低端技术的用户？移动设备？），而你本来可以使用单色模式节省的额外带宽是（IMO）不太可能根据带宽疏远用户（我们谈论的区别有多大？）。我找不到这些情况的任何实际基准。
以下是一些链接，用于讨论这方面的一些相关方面。请注意，第一个链接有一个用户说 IE8 中的 PNG alpha 24 位存在内存泄漏。
CSS透明度和PNG透明度哪个更优越？
CSS 不透明度性能。图像淡入淡出