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

Question

好的，我想知道关于CSS背景图片和http请求的最佳性能是什么。

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

OR

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

喜欢听到你的意见......

Answer 1

我认为最好使用数据：uri技术用于小图像（如1px-backgrounds）。

background: url(data:image/png;base64,....) top left repeat-x;

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

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

当然，这样你必须重新编码背景，如果它已经改变了。但它节省了很多请求。

Answer 2

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

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

不再需要图片;只有一个HTC文件（只能由IE下载）。

Answer 3

保存http请求始终是更好的解决方案。但是你应该观察文件的大小，这样它就不会变大。那么你应该考虑拍两张或更多图片。

查看以下工具，该工具可以轻松地从未打印的图像中创建精灵图像：

http://spriteme.org/