我想知道何时不使用CSS sprites。 CSS sprites很好用，但有没有什么时候会产生很多麻烦？
答案 0 :(得分：26)
与所有事物一样，有时候它是有用的，有时它是有害的。
许多开发人员喜欢使用CSS sprites，因为它节省了请求时间 - 浏览器发出一个请求，下载图像，所有各种精灵现在都自动缓存并且速度极快。
那怎么会受伤呢？
因为下载大小！=内存大小。
只有10kb的PNG或GIF实际上可能会大得多，一旦浏览器将其加载到内存中就会大得多。问题在于，虽然像GIF这样的东西会压缩纯色区域，但浏览器会将其扩展为位图，其中所有相同尺寸的图像都使用相同的内存。
它会在每个时间加载一个新的位图，在某处使用该图像。
所以一切都在适度。
有关详细信息，请参阅：http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/。
答案 1 :(得分：11)
您网站的可维护性将受到使用。仅合并属于同一逻辑单元且不太可能单独更新的图像。保留可能会分开更改的图像。
答案 2 :(得分：3)
CSS精灵对<input type="text">的效果不好，用户可以在框中输入更多内容，因为背景会在某些版本的IE中滚动。
如果你想重复这种模式，它们也会很糟糕。
答案 3 :(得分：1)
我们想要动态定位图像时遇到了困难。
background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: left bottom;
使用精灵这很棘手（如果不是不可能的话）。
答案 4 :(得分：1)
如果用户想下载特定图片，他们可能会让您头疼。首先，他们不会得到“将图像另存为”选项。如果他们想要使用“查看背景图片”，他们也会得到一张包含大量其他图片的巨幅图片。
这就是精灵最好保存为“实用程序”（即按钮）或设计图像的原因。
答案 5 :(得分：-1)
当图像大小非常不同时，绝对不要使用精灵 因为在这种情况下，精灵的大小非常大 最近我将3.5MB图片转换为精灵，大小拍摄到17MB！
答案 6 :(得分：-3)
使用更大的照片可能会让人头痛...... 当图片以较小的尺寸组合，并且相邻的图片彼此之间只有1或2像素时，CSS精灵可以是一个很好的解决方案。 在我们的案例中，http://www.nbhuntop.com，我们只是将其用于菜单组件，包括：Home，About，Products。所有的照片都是gif格式，没有人会下载这些照片。