CSS 重复背景、精灵或 1px png
好的，我想知道关于 CSS 背景图像和 http 请求的性能最佳实践是什么。
1.使用许多不同的 1px png 背景图像导致多个单独的 http 请求
或
2.使用一张带有大渐变块块的大图像精灵作为背景图像。这会增加文件大小，但会节省 http 请求。
很想听听您的意见...
Ok I want to know what is the best practice for performance regarding CSS background images and http requests.
1. Use many different 1px png background images resulting in several individual http requests
OR
2. Use one large image sprite with big gradient block chunks for use as background image. This will increase file size but save on http requests.
Love to hear you opinions...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为对于小图像（如 1px 背景）使用 data:uri 技术会更好。
它适用于所有现代浏览器。对于旧的 IE 浏览器（如 IE6、IE7），您可以通过条件注释覆盖样式。
当然，如果背景发生了变化，您必须重新编码背景。但它节省了很多请求。
I think it would be better to use data:uri technique for small images (like 1px-backgrounds).
It works for all modern browsers. For old IE browsers (like IE6, IE7) you can overwrite styles by conditional comments.
Of course this way you have to re-encode background, if it has changed. But it saves a lot of requests.
如果您正在谈论使用这些图像进行渐变，我建议使用 CSS 渐变，那么您根本不需要任何图像。
当然，CSS 渐变的一个明显问题是老版本的 IE 不支持它。好消息是，IE 有一个名为 CSS3Pie 的修复程序，允许它支持标准 CSS 渐变功能（以及几个其他有用的 CSS 功能，
不再需要图像；只需一个 HTC 文件（只能由 IE 下载）。
If you're talking about using these images for gradients, I'd suggest using CSS gradients, then you won't need any images at all.
Of course, the obvious problem with CSS gradients is that it isn't supported by older versions of IE. The good news is that there is a fix for IE called CSS3Pie that allows it to support the standard CSS gradients feature (along with several other useful CSS features.
No more images required; just one HTC file (which only gets downloaded by IE).
保存 http 请求始终是更好的解决方案。但无论如何，您应该注意文件大小，以免文件变大。那么你应该考虑制作两张或更多图像。
查看以下工具，它可以轻松地从无精灵图像创建精灵图像：
http://spriteme.org/
saving http requests is always the better solution. But nevertheless you should watch the file size, so that it does not get to big. Then you should consider making two images or more.
Look at the following tool which allows the easy creation of sprite images from unsprited images:
http://spriteme.org/