css sprites将多张图片合并成一张

CSS Sprites原理

编辑

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出 背景图片的位置。

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轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。

no css sprite和css sprite的区别

div,ul,li,h3{margin:0; padding:0;}
ul,li{list-style:none;}
div{margin:50px; float:left; font-size:12px; width:200px; background:#eee;}
h3{height:28px; line-height:28px; padding-left:15px; background:#ccc; border-bottom:1px solid #aaa;}
ul{overflow:hidden; zoom:1;}
li{height:26px; line-height:26px; padding-left:30px; border-bottom:1px dashed #aaa;}
/* No CSS Sprites */
.li1{background:url(http://ons.me/wp-content/uploads/2010/07/1.gif) no-repeat 6px 6px;}
.li2{background:url(http://ons.me/wp-content/uploads/2010/07/2.gif) no-repeat 6px 6px;}
.li3{background:url(http://ons.me/wp-content/uploads/2010/07/3.gif) no-repeat 6px 6px;}
.li4{background:url(http://ons.me/wp-content/uploads/2010/07/4.gif) no-repeat 6px 6px;}
.li5{background:url(http://ons.me/wp-content/uploads/2010/07/5.gif) no-repeat 6px 6px;}
.li6{background:url(http://ons.me/wp-content/uploads/2010/07/6.gif) no-repeat 6px 6px;}
.li7{background:url(http://ons.me/wp-content/uploads/2010/07/7.gif) no-repeat 6px 6px;}
.li8{background:url(http://ons.me/wp-content/uploads/2010/07/8.gif) no-repeat 6px 6px;}
.li9{background:url(http://ons.me/wp-content/uploads/2010/07/9.gif) no-repeat 6px 6px;}
.li10{background:url(http://ons.me/wp-content/uploads/2010/07/10.gif) no-repeat 6px 6px;}


/* CSS Sprites */
.lo1,.lo2,.lo3,.lo4,.lo5,.lo6,.lo7,.lo8,.lo9,.lo10{background:url(http://ons.me/wp-content/uploads/2010/07/all.gif) no-repeat;}
.lo1{background-position:6px 5px;}
.lo2{background-position:6px -25px;}
.lo3{background-position:6px -55px;}
.lo4{background-position:6px -85px;}
.lo5{background-position:6px -115px;}
.lo6{background-position:6px -145px;}
.lo7{background-position:6px -175px;}
.lo8{background-position:6px -205px;}
.lo9{background-position:6px -235px;}
.lo10{background-position:6px -265px;}