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

好吧我想知道什么是有关CSS背景图像和http请求的性能的最佳做法。CSS重复背景，精灵或1px png

1.使用许多不同的1px的PNG背景导致几个单独的HTTP请求图像

2.使用一个大的子画面图像与大梯度块的块用作背景图像。这将增加文件大小，但保存在http请求上。

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

2011-07-01 wilsonpage

您可能需要测试1px图像与10px图像的浏览器渲染性能，一些浏览器在渲染100个1px背景图像时肯定比较慢，而10个10px背景图像（滚动时更慢，等等）但我最近没有尝试过，所以这可能是过去的事情 –

这取决于你的背景图片的样子 –

我认为这将是更好地使用数据：URI技术的小图像（如1像素，背景）。

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

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

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

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

2011-07-01 14:02:04 Vladimir

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

请看下面的工具，它允许从unsprited图像轻松创建的子画面图像：

2011-07-01 11:12:56 Fender

另外：我依赖于你的背景重复值，你是否可以精灵你我法师（但是我确信你知道之前;-)） – Fender

对于图像精灵来说有多大？ – wilsonpage

我的ATM是大约80kb ATM – wilsonpage

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

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

不需要更多图像;仅有一个HTC文件（只能下载通过IE浏览器）

2011-07-01 14:12:29 Spudley

回答