原理

CSS Sprites,也称为精灵图或雪碧图,就是把多个小背景图片整合到一张大图片中,这样网页从需要请求多个小图标变成了只需要请求一张图片,对应的图标利用background-position属性移动图片位置即可。比如很多博客页脚用的徽标和公安图标等,我们可以把所有图标汇总到一张图片中,减少请求次数,在一定程度上可以提升博客加载速度。

操作

SVG to PNG

如果你知道多个 SVG 制作精灵图的方法可以忽略该步骤

  1. 方法一
    我们只需要把链接中的二级域名img改成raster,即可把SVG转换为PNG格式
  2. 方法二
    我们也可以自己利用在线工具网站转换,SVG 转 PNG

精灵图生成

大家会 PS 的可以自己制作精灵图,不过这里我分享一个一键生成精灵图的工具,挺方便的

具体图标调用

大体的 css 属性,软件已经写好给我们了,我们只需要修改对应的选择器即可

  1. 给 footer 中徽标的 a 标签添加对应的 class 类名
1
2
3
4
5
6
footer:
owner:
enable: true
since: 2020
custom_text: <a target="_blank" class="hexo" href="https://hexo.io/"></a><a target="_blank" class="jsdelivr" href="https://www.jsdelivr.com/github"></a><a target="_blank" class="dogecloud" href="https://www.dogecloud.com/"></a><a target="_blank" class="theme" href="https://github.com/jerryc127/hexo-theme-butterfly"></a><a target="_blank" class="github" href="https://github.com/Gahotx"></a><a target="_blank" class="vercel" href="https://vercel.com/"></a>
copyright: false # Copyright of theme and framework
  1. 在自己的公安备案号前面添加一个 div
1
<div class="beian"></div>
  1. 在自己 inject 引入的 css 文件中写入对应的 css 即可

因为每个人的页脚不同,所以下面只演示精灵图调用,其他间距等细节自行微调,也可以 F12 参考本站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.beian,
#footer-wrap .footer_custom_text a {
display: inline-block;
background-image: url(精灵图地址);
background-repeat: no-repeat;
vertical-align: text-bottom;
}
.beian {
height: 20px;
width: 20px;
background-position: 0 0;
}
.hexo {
height: 20px;
width: 101px;
background-position: -20px 0;
}
.jsdelivr {
height: 20px;
width: 103px;
background-position: -121px 0;
}
.vercel {
height: 20px;
width: 111px;
background-position: -224px 0;
}
.github {
height: 20px;
width: 113px;
background-position: -335px 0;
}
.theme {
height: 20px;
width: 121px;
background-position: -448px 0;
}
.dogecloud {
height: 20px;
width: 121px;
background-position: -569px 0;
}

总结

说句题外话,前端技术比较前沿的B站的页脚图标也用了精灵图,其他社区模块等地方也有使用。其实就是不常变动的图片图标,都可以利用精灵图来减少一些请求次数,从而在一定程度上提升网站的加载速度。比如你头像几乎不变动的话,那么你可以给头像也加进上面的精灵图里,其他图片同理,虽然几张小图片改变的网站加载速度可能不大,但是积少成多,而且用了精灵图后,即使图片加载慢,也不会出现一个个徽标往外冒的情况,都是同时加载的一张图。