CSS 雪碧图生成器（把图标合并成一张图）

CSS 雪碧图生成器（把图标合并成一张图）: 用途

雪碧图把多个图标合并成一张图片，CSS 通过 background-position 在各处显示正确的部分。浏览器只需发出一个请求而不是十个，悬停图标也不会闪烁。

选择图标、排列方式（网格、行或列）、图标间距和格式。下载雪碧图并复制 CSS，每个图标一个类（文件名即类名），含宽度、高度和位置。视网膜选项会把按两倍尺寸制作的图标缩小一半显示，在高密度屏幕上更清晰。

使用方法

1. 选择图标。
2. 调整排列方式、间距和格式。
3. 下载雪碧图并复制 CSS。

使用场景

• 带悬停效果的社交媒体图标。
• 国旗和徽章。
• HTML 游戏的雪碧图。

常见问题

雪碧图有什么用？

浏览器不用下载十个单独的图标，而是只下载一张图片，CSS 通过 background-position 在各处显示正确的部分。这样能减少对服务器的请求数量，并避免鼠标悬停时图标闪烁，因为悬停状态已经加载好了。

在 HTTP/2 下使用雪碧图还有意义吗？

在 HTTP/2 下，许多小文件的开销已经大幅降低，所以收益不如过去大。雪碧图仍适用于悬停图标集、国旗、徽章和 canvas 游戏，以及无法使用内联 SVG 的情况。

视网膜选项是什么？

如果你的图标是按显示尺寸的两倍制作的，请勾选此选项：CSS 会通过 background-size 把每个图标缩小一半显示，在手机和 Mac 等高密度屏幕上更清晰。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具