什么是精灵图?在css中如何使用精灵图

html-css014

什么是精灵图?在css中如何使用精灵图,第1张

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是6个。对于未来而言,就不需要这样做了,因为有了`http2`。

具体请查看“background-image”,“background- repeat”,“background-position”的使用方法

什么是精灵图?

就是将几张较小的图片放在一张大图上

为什么要有精灵图?

最早的时候网速十分有限,为了提升用户体验,我们会将一张大图分解成多张小图来提高页面打开速度,但是网速得到了提升,为了能够让服务器承载更多的请求,我们要减少浏览器对服务器的请求,最直接的方式,就是将多张较小的图片放在一张大图上,从而减轻服务器的压力。而将多张小图放到一张大图上的操作就叫做精灵图,也可以叫做雪碧技术 也叫做css sprite

精灵图的使用

一张大的图片上有很多小的图片,那么如何将这个小的图片拿出来呢?

1.如果我们需要的一张图片在精灵图上,必须要了解这个图片的大小以及在精灵图上的位置

比如:新浪网上的搜索按钮,首先得到它的宽高和位置

2.在页面上将这个图片显示出来,在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样

比如:我们要html页面上放一个div,宽高为图片的搜索按钮的宽高

3.将精灵图设置为容器的背景图片,并且根据图片所在的位置将背景图片进行平移

制作精灵图

1.精灵图必须是一些小的图片

2.精灵图的多个小图之间一定要留有足够的间隙

3.精灵图的大小一定要大于所有图片中最大的那个

4.完成精灵图以后一定要在精灵图下方留有足够的空隙,方便将来再次添加其它的精灵图

5.如果是页面上一个像素的背景图片不要放在精灵图上面

制作精灵图时需要将其中的多张小图合理的排列是否正确?回答是:制作精灵图时需要将其中的多张小图合理的排列是否正确?是正确的,如果是横向平铺,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列如果是纵向平铺,只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排放。