CSS Sprite 精灵图

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。

 

举个栗子：

　　　　　　　.img{background:url(img/img.png)  no-repeat;}
            .qq{height:34px;width:30px;background-position:0 0;}
            .pic{height:12px;width:50px;background-position:-30px 0;}
            .b1{height:74px;width:74px;background-position:-80px 0;}
            .b4{height:74px;width:74px;background-position:-154px 0;}
            .b2{height:74px;width:74px;background-position:-228px 0;}
            .b3{height:74px;width:74px;background-position:-302px 0;}
            .b5{height:120px;width:167px;background-position:-376px 0;}

 

精灵图生成工具，和使用方法都在这篇文章里：http://developer.51cto.com/art/201504/474506.htm

转载于:https://www.cnblogs.com/yuqingfamily/p/6868797.html