css sprites將多張圖片合併成一張
阿新 • • 發佈：2019-02-01
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;}