CSS重复背景、精灵或1px png

好的，我想知道CSS背景图像和http请求的最佳性能实践是什么

1。使用多个不同的1px png背景图像，生成多个单独的http请求

或

2。使用一个带有大渐变块的大图像精灵作为背景图像。这将增加文件大小，但在http请求时保存。

---

很高兴听到您的意见……

保存http请求始终是更好的解决方案。但是无论如何，你应该注意文件的大小，这样它就不会变大。然后你应该考虑做两个或更多的图像。< /P> 请看下面的工具，它允许从未编写的图像轻松创建精灵图像：

---

我认为最好对小图像（如1px背景）使用data:uri技术

它适用于所有现代浏览器。对于旧的IE浏览器（如IE6、IE7），您可以通过条件注释覆盖样式

background: url("path/to/background.png") top left repeat-x;

---

当然，如果背景发生了变化，您必须以这种方式重新编码背景。但是它节省了大量的请求。

如果您正在谈论使用这些图像进行渐变，我建议使用CSS渐变，那么您根本不需要任何图像

当然，CSS渐变的一个明显问题是旧版本的IE不支持它。好消息是，IE有一个名为的补丁，允许它支持标准CSS渐变功能（以及其他一些有用的CSS功能）

---

无需更多图像；只需一个HTC文件（只能通过IE下载）。

另外：我取决于你的背景重复值，你是否可以对图像进行精灵化（但我相信你以前知道；-））对于图像精灵来说，多大太大？我不认为这太大。但这取决于许多不同的事情。设想一个下载速度为64kbit/s的大背景精灵，那么在整个图像加载之前，你无法看到背景，所以在这里最好看到一个进度，比如出现背景图像：）我建议你尝试sprite（答案中有链接），它会为你创建图像，并显示使用精灵的保存过程。它还考虑了精灵的问题，如果它不可用，则不会创建精灵。您可能希望在1px图像上测试浏览器渲染性能，而不是在10px图像上测试浏览器渲染性能。某些浏览器在渲染100个1px的背景图像时速度肯定会慢一些，而在渲染10个10px的背景图像时速度会慢一些（滚动等操作时速度会慢一些），但我最近没有尝试过，所以这可能是过去的事了。这取决于背景图像的外观。

background: url("path/to/background.png") top left repeat-x;