跳转到内容
aswind7
GitHub
Blog

CSS 雪碧图：原理、工具与实践指南

CSS 雪碧图（CSS Sprites）是一种网页图片应用处理方式，它将一个页面涉及到的所有零星图片都包含到一张大图中，然后利用 CSS 的 background-image，background-repeat，background-position 属性进行背景定位，显示大图的指定部分。

原理

雪碧图的核心实现原理包括两个方面：

  1. 位置计算：精确计算每个小图标在大图中的 x 和 y 坐标。当需要显示某个小图标时，通过 CSS 的 background-position 将背景图片移动到正确的位置。
    • 辅助工具：Sprite Cow 可以帮助开发者方便地获取雪碧图中各个小图标的坐标和尺寸。
  2. 图片压缩：为了优化加载速度，合并后的大图（雪碧图本身）也需要进行压缩，以减小文件体积。

主要优势：显著减少 HTTP 请求数量，从而加速页面加载。

推荐参考：CSS雪碧图制作及技巧心得

图片压缩工具

生成雪碧图后，对其进行压缩至关重要。以下是一些常用的图片压缩工具：

国外工具

  • TinyPNG: 能节省70%以上，在线工具，非常流行。
  • ImageOptim: 客户端软件（Mac），能节省60%以上，效果优秀。
  • Compressor.io: (原文提及网站可能存在访问问题)。

国内工具

雪碧图生成方案与工具

除了手动制作，还可以借助工具自动化生成雪碧图和对应的CSS。

  1. 腾讯 GoPNG:

    • 优点：可自定义CSS模板，支持固定尺寸排列。
    • 缺点：原文提及压缩效果可能不佳（例如，5个11KB的小icon生成的sprite.png有70KB）。下文将详细介绍其使用方法。

  2. CssGaga:

    • 优点：能够压缩得比较小。
    • 缺点：仅有Windows 7版本。
    • 地址：http://www.99css.com/cssgaga/
    • 工作流程：将多个icon.png和原来的 background(url:/slice) 的 slice.css 一起编译，生成 /style/sprite.png 和 /style/style.css。好处是每次添加新图片，重新编译不会影响之前的样式。

  3. Compass + SASS:

    • 需要配合SASS使用，可以自动合并CSS雪碧图。

  4. gulp-sprite:

  5. css-sprite:

使用 GoPNG 高效制作雪碧图

以下介绍两种使用 GoPNG 制作雪碧图的方案。

方案一：使用 Wrapper 元素（内外层分离）

这种方案通过内外两层元素，外层控制尺寸，内层显示图标。

  1. GoPNG 设置:

    • Fixed Size: 选择 vertical (垂直显示)。这样做的好处是，以后即使增加新的小图标，也只是在雪碧图的底部追加，不会影响原有图标的 background-position 的 y 坐标。
    • Relative Path: 设置生成的雪碧图相对路径，例如 images/icon_sprite.png。

  2. CSS 模板:

    .<%=name%>_wrapper {
height: <%=h%>px;
width: <%=w%>px;
}
.<%=name%> {
background: url(<%=relative_path%>);
background-position: -<%=x%>px -<%=y%>px;
background-repeat: no-repeat;
}

  3. 生成 CSS 示例: 生成的 CSS 代码应单独存放，方便后续通过 GoPNG 更新替换。

    .icon_youshi2_wrapper {
height: 81px;
width: 81px;
}
.icon_youshi2 {
background: url(images/icon_sprite.png); /* 注意：原文此处漏了分号，已补上 */
background-position: -0px -0px;
background-repeat: no-repeat;
}
.icon_youshi3_wrapper {
height: 81px;
width: 81px;
}
.icon_youshi3 {
background: url(images/icon_sprite.png); /* 注意：原文此处漏了分号，已补上 */
background-position: -0px -81px;
background-repeat: no-repeat;
}

  4. HTML 用法:

    • 外层 <span> 使用 micon-sprite-wrapper（通用）和 icon_youshi2_wrapper（特定尺寸）。
    • 内层 <i> 使用 micon-sprite（通用）和 icon_youshi2（特定背景）。
    <span class="micon-sprite-wrapper btn_fwnr_search_nor_wrapper cp">
    <i class="micon-sprite btn_fwnr_search_nor"></i>
</span>

  5. 公共样式: 为 micon-sprite-wrapper 设置公用样式：

    .micon-sprite-wrapper {
display: block; /* 或 inline-block，视情况而定 */
}

    为 micon-sprite 设置公用样式：

    .micon-sprite {
display: block;
width: 100%;
height: 100%;
}

  6. 注意事项:

    • 命名规范: 与设计师约定好图片命名规范，因为图片文件名会直接作为 CSS 类名的一部分。
    • 环境导出: 制作完雪碧图后，导出 GoPNG 的工作环境，方便下次在此基础上继续添加或修改。

方案二：单元素实现

这种方案直接在一个元素上设置所有雪碧图相关的样式。

  1. GoPNG 设置:

    • Fixed Size: 选择 vertical (垂直显示)。
    • Relative Path: 设置相对路径，例如 images/sprite_index.png。

  2. CSS 模板:

    .<%=name%> {
display: block; /* 或 inline-block */
height: <%=h%>px;
width: <%=w%>px;
background: url(<%=relative_path%>);
background-position: -<%=x%>px -<%=y%>px;
background-repeat: no-repeat;
}

  3. 生成 CSS 示例: 生成的 CSS 代码同样需要单独存放。

    .icon_youshi2 {
display: block;
height: 81px;
width: 81px;
background: url(images/sprite_index.png);
background-repeat: no-repeat;
background-position: -0px -0px;
}

  4. HTML 用法:

    • 直接在 <i> 标签（或其他合适标签）上应用生成的类名，如 icon_youshi2。
    • 可以添加一个通用类名如 micon-sprite (原文提及 micon-sprite 但在HTML用法中未体现，这里假设其用于标识这是一个雪碧图图标)。
     <i class="btn_fwnr_search_nor"> <!-- 假设 btn_fwnr_search_nor 是 GoPNG 生成的类名 -->
 </i>

    或者，结合通用类名：

     <i class="micon-sprite btn_fwnr_search_nor">
 </i>

  5. 位置调整: 由于尺寸和背景已在 icon_youshi2 类中定义，具体在页面中的位置可以通过额外的 CSS 进行调整，如使用 margin 或绝对/相对定位。

    /* 首页导航处 */
.index .nav .icon_youshi2 {
position: absolute;
left: 10px;
/* top: ...; */
}

/* 其他页面footer处 */
.other .footer .icon_youshi2 {
margin: 20px;
}

  6. 注意事项:

    • 命名规范: 设计师提供的图片文件名应规范，例如均以 icon_ 打头，因为文件名会作为 CSS 类名。
    • 环境导出: 制作完雪碧图后，导出 GoPNG 的工作环境，方便下次操作。

通用建议

  • 垂直排列优先: 在生成雪碧图时，优先采用垂直排列方式。这样，当未来需要添加新图标时，只需在雪碧图的底部追加，不会影响已有图标的 background-position (特别是 y 坐标)，从而减少了维护成本。
  • 语义化类名: 尽量使用有意义的类名，既能反映图标内容，也方便维护。
  • 一致性: 在项目中保持雪碧图制作方法和命名规范的一致性。

通过合理运用雪碧图技术及相关工具，可以有效提升网页加载性能，改善用户体验。

Tags: