我正在为我的移动网站创建一个占星页面。
以下是我正在使用的图片资源的详细信息。
现在我将每个渲染为单独的图像文件。
我已经阅读了很多关于使用精灵的建议，例如： http://alistapart.com/article/sprites和 Why should I use sprites on my mobile site?
但我的问题是关于使用＆＃34; Mega CSS Sprites＆＃34;专门用于＆＃34;移动网站＆＃34;以及它们的缺点（除了维护之外）。
提前致谢。
答案 0 :(得分：0)
除可维护性外，还有一些缺点包括：
我在Mac上使用Image Alpha，它允许您通过限制它的调色板来压缩png，我确定有类似的Windows工具。许多png可以限制在256种，128种甚至64种颜色而不会降低质量，因为它们的调色板并不广泛。
这通常会将文件大小减少50％或更多，而且您通常无法使用图像精灵来处理，因为会合并更多图像。
您无法使用以下内容：background: contain和background: cover来调整背景图片的大小。
将背景图片置于一个框中会更加困难，因为您无法使用background-position: left center等。
计算background-size: 80%等也会变得诡计多端。你仍然可以，它只是在精灵表的大小改变时改变，你最终可能会根据位置显示精灵的其他位。
虽然请求较少，但浏览器必须先下载更多数据才能使用精灵显示任何图像。这意味着右上角的徽标可能作为单个文件显得更快，因为在浏览器仍在请求其他文件时，它将被下载并显示。
我已经看到过这种情况，但效果很少引起注意。
这些和可维护性开销的组合通常使我无法使用广泛的精灵图像，但我仍然通常将默认和悬停状态组合成一个精灵，或者一组相似颜色调色板中的相关图像。