【重学前端】CSS 图像拼合技术

图片精灵

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。主要用于网页中的小图标。如京东右侧浮动导航

 

优势：

1. 减少http iis请求数
2. 提升了网站性能
3. 减少图片文件数目

缺点：

1.开发过程比较繁琐

2.需要测量计算每一个背景单元的精确位置，进行定位

3.后期新加或删除图标比较麻烦

怎么使用图片精灵

准备工作

HTML：速写ul结构：ul#Sprites>(li>span.tb0$)*4

		
购物车
		
用户
		
收藏
		
客服

操作步聚：

1.引入背景图像，并设定span标签的宽高，让超出内容部分隐藏overflow:hidden

2.再分别对不同span class设置对应图标绝对X坐标值，Y坐标值。

坐标的选取（使用ps切片工具）

1. 找到需要定位的图标做切片选取
2. 双击进入切片选项
3. 获取X和Y的尺寸（除原点以后，其它坐标均为负值）

注意:

1. 背景background-position有两个数值，前一个代表靠左距离值X（可为正可为负），第二个数值代表靠上距离值Y（可为正可为负）
2. 图片左上角为坐标原点（X,Y）=(0,0)