大前端

前端学习之家-大前端

css常见问题--精灵技术sprite

目录

        产生原因        

        原理

        使用原则

        使用方式

        优缺点

        优点

        缺点


产生原因        

        当用户访问网站,需要向服务器发送请求,网页上每张图像都要经过一次请求才能展现给用户。故若一个网页背景应用多张细碎图像,图像过多情况下,服务器会频繁接受和发送请求,导致降低网页加载速度,影响服务器效率。为了解决此问题,css精灵技术随之产生。

原理

        css精灵技术将网页中的细碎零星图像整合到一张大图中,再将大图应用于背景。如此,当用户访问页面,只需向服务器发送一次请求,图像便可全部显示。通常情况下,这个由许多小的背景图像整合成的大图被称为精灵图。

使用原则

        1、背景图像很少的情况下,不必要使用精灵技术,维护成本高

        2、精灵图上放的是小的装饰性质的背景图像,插入图像不能放上去使用

        3、精灵图的宽度取决于最宽的背景图像

        4、精灵图可以横向或者纵向摆放

        5、使用background属性可以精确定位精灵图中某个小图

使用方式

        1、测量位置。测量所需图片在整张精灵图上的位置,测其x、y轴方向

        2、使用background属性引入精灵图中的小图,确定好其位置,以便于之后使用时精确定位

优缺点

优点

        1、减少网页对服务器的请求,提高网页加载速度,提高服务器效率和网页性能

        2、减少图片字节。通常多张图片合成精灵图的字节小于单张图片的字节总和

缺点

        维护较难,维护成本高。当页面背景图片有改动,当图片改动大时,可能需要对整张精灵图进行重新页面布局

发表评论:

Copyright Your WebSite.Some Rights Reserved.