CSS Spritesheets

Question

我刚刚开始使用CSS spritesheets来显着减少用户在我们的网络服务器上发出的请求数量（之前我曾设计过一个包含200个缩略图的页面，每个缩略图都是单独链接的，所以只有200个请求只是针对那些并且没有'知道这是一个问题，直到有人告诉我这件事）

经过w3schools后，我已经找到了如何使用它并下载了spritesheetpacker来帮助我制作spritesheet以及给我尺寸和偏移量。

现在我有一个非常长的CSS文件，我不期待手动标记200个HTML元素。有没有不同的方法来处理这种情况？以下是一些细节：

我熟悉javascript（虽然不是很多JQuery）

我拥有来自包装工的图像的所有尺寸和偏移。

该页面包含一个包含缩略图列的表格，另一列包含与该文件相关联的文件的链接，因此人们可以快速滚动页面并选择他们想要的内容。您还可以单击缩略图以查看完整尺寸的图片

我目前正在使用img标签显示图像并用锚点包装它们，其中img类只是图片文件名（因为它也包含在打包器的输出中）

Answer 1

您可以通过将具有相似尺寸的事物分组在一起然后只编码背景图像来保存一些CSS。

<a class="buttonA Image5"></a>

.buttonA {
   width:100px;
   height:30px;
   display:block;
}

.image5 {
   background-image:url(...);
   background-position:....
}

如果您在锚点上使用display:block，则可以在其上使用CSS背景并完全删除图像标记。