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

图片精灵

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

 

优势：

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

缺点：

1.开发过程比较繁琐

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

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

怎么使用图片精灵

准备工作

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

<ul id="Sprites">
		<li><span class="tb01"></span>购物车</li>
		<li><span class="tb02"></span>用户</li>
		<li><span class="tb03"></span>收藏</li>
		<li><span class="tb04"></span>客服</li>
</ul>

<style type="text/css">
			#Sprites{margin: 0;padding: 0;}
			#Sprites li{list-style: none; height:24px;}
			/*
			 引入背景，并设定span标签的宽高，让超出内容部分隐藏overflow:hidden
			 */
			#Sprites li span
			{ 
				background: url(images/toolbars.png) no-repeat;
				float:left; 
				width:18px;
				height:18px;
				overflow:hidden;
			}
			/*
			 设置目标定位图片绝对坐标：前一个是X坐标，后一个Y坐标
			 */
			#Sprites li span.tb01{background-position: -1px 0px;}
			#Sprites li span.tb02{background-position: -96px -212px;}
			#Sprites li span.tb03{background-position: -1px -50px;}
			#Sprites li span.tb04{background-position: -1px -151px;}
		</style>

操作步聚：

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)