我即将构建一个包含大量纹理背景的设计，这些背景使用相同的羊皮纸图案但颜色不同。显然，我可以为每种颜色创建和导出不同的平铺背景图像，但我想知道创建一个单色图案是否更聪明，我可以覆盖具有必要块背景颜色的元素。
我的问题是，从性能的角度来看，这种方法是否可行。我以前为小元素做过这个，但我想知道在许多元素上使用这种技术是否会慢得让人无法接受，例如网站的背景、给定页面上的几个 div、按钮等。经验告诉我，旧的浏览器对太多的 png alpha 感到窒息（尽管这个项目是 IE8+，幸运的是）。
有什么想法吗？
编辑：当我谈到性能时，我主要关心的不是下载时间，而是实际的页面渲染性能。我注意到 alpha PNG 在过去落后于某些浏览器，因此即使是一个小的平铺纹理的广泛使用也可能（我猜）会导致类似的问题。
在这个阶段下载性能不是问题。
我强烈建议使用单一的单色图案。我建议这样做，因为在这种情况下，浏览器只加载一个图像文件，而在另一种选择中加载多个文件。如果您的网站很小并且没有获得太多流量，那可能并不重要，但是优化您所做的工作量始终是一个好习惯。
From a performance point of view, I would say stick with the same parchment pattern in different colors. I agree that your solution is cleaner - that's what I'd prefer - but you're only going to alienate users who possibly receive decreased performance on the client end (users with low-end tech? mobile devices?), whereas the extra bandwidth you would otherwise save using the monochrome pattern is (IMO) less likely to alienate users based on bandwidth (how big a difference are we talking?). I can't find any actual benchmarks for these situations.
Here are some links that discuss some related aspects of this. Note the first link has a user saying there are memory leaks in PNG alpha 24-bit in IE8.
表现什么？如果加载性能，那么使用更少的文件会加快速度。如果滚动的性能，那将取决于你如何构建它和你的目标受众。
几年前我建立了一个有美国观众的网站，并使用了覆盖纯色的单色透明 PNG。我在很多机器上测试过这个。唯一的显示性能问题是，如果某些东西在其他不是的东西的顶部滚动。例如，如果您有两个图案重叠，一个滚动，而另一个滚动，您将在速度较慢的机器和移动设备上看到一些重绘问题。
这仅适用于少数元素，包括页面背景。如果您将其应用于每页的数十个元素，则可能会开始在旧机器上显示问题。但它仍然比具有转换功能的大型 JS 滑块占用的资源要少。