CSS精灵图(sprite)技术 减少网页背景图片请求次数

新酱
149
文章
37
评论
2020年6月15日17:27:29 评论 75 573字阅读1分54秒

我们知道,网页中的每一张图片,都是一个请求,这些请求会占据一定的服务器带宽,当这些请求很多的时候,就会造成服务器带宽被占满,或者图片显示很慢,用户体验极差。

这时候就需要精灵图(sprite)来解决了,精灵图就是将网页中所有用到的背景图片以及图标浓缩到一张图上,这就显著的减少了图片和图标的请求,只请求一次就可以用所有背景图标。

典型例子

相信大家都会玩王者荣耀,王者荣耀的官网就使用了精灵图,通过审查元素可以查找到这张精灵图。

CSS精灵图(sprite)技术 减少网页背景图片请求次数

上面的精灵图中包含了用到的所有图标和按钮背景图片。

使用方法

使用精灵图必须熟练掌握背景定位background-position,以及精确的测量,以精灵图左上角为基点,向下为y轴,向右为x轴,精确测量所选的图标宽高,以及所选图标距离基点的y轴和x轴距离。

下面我以下载游戏这个背景图为例,将精灵图拖入ps中,使用矩形选框工具,放大到像素点框选,然后在属性的变换中可以精确的看到下载游戏的宽高及轴距离。

CSS精灵图(sprite)技术 减少网页背景图片请求次数

得到这些数据之后就可以开始背景定位了,我这里以div为例。

上面是一个div,使用了精灵图,通过定位找到下载游戏这个背景,具体的代码你可以审查元素。

核心总结

  1. 精确测量每个小背景图片的大小和位置
  2. 给盒子指定小背景图片时,背景定位基本都是负值

注意事项

精灵图只适合背景图片很多的站点,如果是小公司,背景图片不是很多不建议使用,维护成本很高。

  • 版权声明: 发表于 2020年6月15日17:27:29
  • 转载注明:https://www.xiaorenjc.net/program/front/css/1395

您必须才能发表评论!