龙空技术网

CSS精灵图技术(提高页面的加载速度)

未来2088 744

前言:

今天大家对“css背景图片精灵技术的步骤和说法”大致比较注重,你们都需要学习一些“css背景图片精灵技术的步骤和说法”的相关文章。那么小编同时在网络上搜集了一些有关“css背景图片精灵技术的步骤和说法””的相关知识,希望小伙伴们能喜欢,姐妹们快快来学习一下吧!

哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

志同道合的小伙伴跟我一起学习交流哦!

第二阶段 CSS318 CSS精灵技术



1 CSS精灵技术产生的背景

图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户,然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites、CSS雪碧)。

2 CSS精灵技术的本质

简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,如下图所示为京东网站中的一个精灵图。

3 CSS精灵技术的使用

CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的 background- Image、 background- repeat和 background- position属性进行背景定位,其中最关键的是使用 background-position,属性精确地定位。

No-repeat 不平铺 ,横坐标x为0 ,纵坐标y为-100,

4 拼出自己的名字

5 王者荣导航栏

找到一个较小的图片背景,open in new tab 可以查看到精灵图

6 PS制作精灵图

CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。

大部分情况下,精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。插入的大图片不能往上放

我们精灵图的宽度取决于最宽的那个背景。

我们可以横向摆放也可以纵向摆放,但是每个图片之间,间隔至少隔开偶数像素合适。

在我们精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图。

结束语:小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。如果是背景图片比较多,可以建议使用精灵技术。

7 运用制作精灵图

Ps确定xy轴和宽高

看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

本章已结束,下篇文章将分享《19 字体图标》小伙伴们不要错过哟!

标签: #css背景图片精灵技术的步骤和说法