你确定会用CSS Sprites（雪碧图）？

富朝阳

已于 2024-03-18 16:50:56 修改

阅读量3.2k

点赞数 95

分类专栏： CSS 文章标签：雪碧图图片精灵 CSS Sprites 在线雪碧图生成 Sprites 图片精灵生成

于 2024-02-19 06:00:00 首次发布

本文链接：https://blog.csdn.net/chaoperson/article/details/136145881

版权

CSS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

问题

我们在打开网页，网页有时候在加载的时候每请求一次图片就算一次请求，请求次数过多也会造成服务器压力过大，相应变慢。那么使用csss怎么解决这个问题呢？当然是雪碧图，也称图片精灵。

一、什么是雪碧图（图片精灵）

雪碧图也叫CSS精灵，是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。我们来看一张图片

这张图片汇聚了10个小图片合成，每个小图片都有自己的像素定位点，那么如何生成雪碧图呢？

二、如何生成雪碧图

1.ps生成

1.首先我们需要安装下photoshop哈

2.新建PSD文件根据设计稿确定初始大小：172*912；

3.复制设计稿图层

4.雪碧图PSD新建参考线；

5.根据参考线确定小图标位置

获取小图标大小、位置；
选中图层， Ctrl+T (mac: Commond + T)，在信息面板查看图层信息；

根据雪碧图编写对应CSS

以上步骤虽然多熟悉后其实很快，但其对新手而言的确不友好；

2.在线网站生成

我们开发人员很多不熟悉PS的话，我们可以使用在线现成的雪碧图生成工具，给大家推荐一个在线雪碧图生成工具。

网站地址：免费在线雪碧图（图片精灵）生成工具

操作方法：我们只要批量将需要制作雪碧图片的文件，拖拽到网站上面，右边就会自动生成一张雪碧图片。雪碧图片里面的间距大小可以调节，也可以选择它的排列方式。横向、竖向、或者是斜对角。图片左边是我们图片定位像素的css，右边是生成的全景雪碧图。比我们在ps制作图片的时候快很多。

怎么样？是不是YYDS！对不懂PS的同学太友好了。

三、雪碧图如何使用

我们用雪碧图来实现这样一个效果

背景图片就用我们刚才用的一张雪碧图啦。

核心代码

// 分来写
background: url("https://code-nav.top/statics/img/webinfo/toolbar.png");
background-position:0 50px;

#合一起来写
background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 50px;

原理

使用定位（background-position）将雪碧图移至您所需要的指定位置。

第一个数值表示背景图相对于自己的左上角向左偏移0px，负值向左，正值向右，

第二个数值表示背景图相对于自己的左上角向上偏移50px，负值向上，正值向下。

那么我们开头的效果怎么实现呢？

我们首先将四个初始图标移动至dom框内展示出来，然后我们在鼠标移入的时候再改成移入展示的背景图片位置。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Sprites（雪碧图）的使用</title>
</head>
<style>
  .tool {
    width: 52px;
    height: 200px;
    background: #f9f2f4;
    transition: all 1s;
    margin: 300px;
    position: relative;
  }

  .item-style {
    width: 52px;
    height: 52px;
    cursor: pointer;
  }

  .tbox {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 485px;
    transition: all 0.5s;
  }

  .tbox:hover {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 425px;
  }

  .tbox1 {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 361px;
    transition: all 0.5s;
  }

  .tbox1 .erweima {
    width: 0;
    height: 0;
    position: absolute;
    right: 52px;
    bottom: 0;
    transition: all 0.5s;
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 700px;
  }

  .tbox1:hover {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 300px;
  }

  .tbox1:hover .erweima {
    width: 165px;
    height: 200px;
  }

  .tbox2 {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 113px;
    transition: all 0.5s;
    position: relative;
  }

  .tbox2 .erweima {
    width: 0;
    height: 0;
    position: absolute;
    right: 52px;
    bottom: 0;
    transition: all 0.5s;
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 -10px;
  }

  .tbox2:hover {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 50px;
  }

  .tbox2:hover .erweima {
    width: 165px;
    height: 200px;
  }

  .tbox3 {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 235px;
    transition: all 0.5s;
  }

  .tbox3:hover {
    background: url("https://code-nav.top/statics/img/webinfo/toolbar.png") 0 170px;
  }
</style>

<body>
  <div class="tool">
    <div class="tbox item-style"></div>
    <div class="tbox1 item-style">
      <div class="erweima"></div>
    </div>
    <div class="tbox2 item-style">
      <div class="erweima"></div>
    </div>
    <div class="tbox3 item-style"></div>
  </div>
</body>

</html>

OK！效果出来了，是不是YYDS！

四、雪碧图使用场景

1.适用场景

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小
加载量比较大

2.不适用场景

一些大图不建议拼成雪碧图如果用大图拼成雪碧图的话，加载的慢，反而达不到显示快的效果。

五、雪碧图的优缺点

雪碧图的优势

1.加快网页加载速度，网页上面每一张图片，都要向浏览器请求下载图片，而浏览器接受的同时请求数是10个，一次能处理的请求数目是两个。

2.后期维护简单，该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，更换图片的时候也只要更改一下图片的位置就可以了。直接生成代码，简单易用。

3.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

4.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

5.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

雪碧图的缺点

1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

2.至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

3.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

五、总结

CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。

今天就分享到这里啦！欢迎在评论区交流。如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

我的博客原文：你确定会用CSS Sprites（雪碧图）？

往期回顾

css实现元素居中的6种方法

Angular8升级至Angular13遇到的问题

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

vite构建打包性能优化

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

ES6实用的技巧和方法有哪些？

css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

富朝阳

关注

95
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
你确定会用CSS Sprites（雪碧图）？

雪碧图也叫CSS精灵，是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。我们来看一张图片这张图片汇聚了10个小图片合成，每个小图片都有自己的像素定位点，那么如何生成雪碧图呢？CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。
复制链接

扫一扫