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

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

文章图片

优势：

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

缺点：
1.开发过程比较繁琐
2.需要测量计算每一个背景单元的精确位置，进行定位
3.后期新加或删除图标比较麻烦
怎么使用图片精灵准备工作
HTML：速写ul结构：ul#Sprites>(li>span.tb0$)*4

购物车用户收藏客服 #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; }

操作步聚：
1.引入背景图像，并设定span标签的宽高，让超出内容部分隐藏overflow:hidden
2.再分别对不同span class设置对应图标绝对X坐标值，Y坐标值。
坐标的选取（使用ps切片工具）