CSS-sprites

CSS-sprites,又叫精灵图

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

概念:CSS-sprites,又叫精灵图,也是CSS图像拼合或者CSS贴图定位

CSS-sprites拼合

选择合适的图像素材去拼合到一张图片上,再、利用定位将图像在网页中渲染出来

  1. 一般小素材或者icon类素材或者比较少改动的图片适合拼合为CSS sprites
  2. 一般大图像或者网页背景不适合拼合为CSS sprites,网络带宽不好的情况下,访问大图的拼合图像,加载时间需要更长
  3. 推荐:一般最好将尺寸大小差不多的品何在一张图片上,这样也会有利于开发者计算定位,降低出错率,提高效率

CSS-sprites优点和缺点

优点

  1. 将众多小图像拼合,一次性加载,减少http请求,提高网站性能
  2. 减少图片文件数量,减少命名太多的困扰,对开发者友好,降低出错率,提高效率

缺点

  1. 在做图片拼合的时候,需要在页面中留有合适的空间,需要精确测量计算位置,会很繁琐,当然现在也有对应的自动拼合且产生定位代码的软件
  2. 不利于维护,当CSS-sprites上的一个图像需要改动时,往往需要改动其他的图像的CSS代码,这就要在制作CSS sprites的时候就要考虑这种图片以后改动会不会很频繁,如果很频繁,可以不放在拼合图像中

CSS-sprites例子

CSS-sprites

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
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
<style>
.sprites div {
margin: 5px;
}
.sprites span {
float: left;
width: 20px;
height: 20px;
background-image: url(sprite.png);
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0;
}
.sprites3{
background-position: 0 -20px;
}
.sprites4{
background-position: -20px -20px;
}
.sprites5{
background-position: -40px 0;
}
.sprites6{
background-position: -40px -20px;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>删除图标</div>
<div><span class="sprites3"></span>存款图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
<div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>

然后快去看看执行结果吧

result

本文标题:CSS-sprites

文章作者:王工头

发布时间:2019年01月23日 - 20:20:06

最后更新:2019年01月25日 - 13:15:50

原始链接:https://qqqww.com/CSS-sprites/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------