CSS 精灵图技术
概述
css精灵英文叫法 css sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”;其实就 是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”, “background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置
利用背景属性background-image插入图片,然后在利用background-position移动图片的位置,达到我想显示的图片部分显示在固定宽高的盒子里
优缺点
优点
(1)减少网页的 http 请求,从而大大的提高页面的加载速度; (2)图片命名上的困扰; (3)更换风格方便。
缺点
(2)需要测量。
- 应用场景:适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。 - 图像拼合小工具汇总分享