目录
问题
我们在打开网页,网页有时候在加载的时候每请求一次图片就算一次请求,请求次数过多也会造成服务器压力过大,相应变慢。那么使用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(雪碧图)?
往期回顾
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
vue3.x使用prerender-spa-plugin预渲染达到SEO优化