相关疑难解决方法(0)

我在一些网站上注意到的一件事是他们使用一个包含大量小图像的BIIIIIIIG图像,然后使用CSS background-position来定义每个图像的坐标,而不是使用单个图像.

这是我在的地方:

使用大精灵表的缺点

• 需要加载大图像才能显示一个小图像
• 需要为每个图像编写(或生成)带有类的长样式表
• 使用大量类定义来混乱CSS可能会影响性能
• 如果一个图像发生更改(或添加了另一个图像),则可能会在图像和与之关联的CSS上遇到缓存问题
• 需要一个<div>合适的样式(display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');),它可以添加另一个类.
• 现在我记不起更多了,我正在打字.

使用大精灵表的优点

• ......呃......还没有.

事实上,这里唯一接近专业人士的是,当我将表单切割成单个图像时,生成的文件夹占用磁盘上的3Mb (由于每个文件<100字节,我的分配大小为4k).实际文件本身的大小不到表和CSS的一半,因此即使有HTTP请求的开销,也可以节省大量空间.

基本上,我的问题是:有没有人有任何专业人士使用大表单对单个图像？