<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SpritePicture</title> <style type="text/css"> .list{ /* 30%;*/ width: 300px; /*background-color: teal;*/ margin: 50px auto 50px; list-style: none; padding: 0px; } .list li{ height: 61px; border-bottom: 1px dotted black; text-indent: 50px; line-height: 60px; background: url(images/bg01.png) 0px 7px no-repeat; /* 需要注意的是,在url()后面跟的数据是图片所放在元素的位置x,y值 或者说 是距离元素左上角的长度,和高度. sprite图, 单图片多处用的好处在于,一次请求,多次使用,能够提升网页加载速度 */ } .list .pic01{background: url(images/bg01.png) 0px 7px no-repeat; } .list .pic02{background: url(images/bg01.png) 0px -74px no-repeat; } .list .pic03{background: url(images/bg01.png) 0px -155px no-repeat; } .list .pic04{background: url(images/bg01.png) 0px -236px no-repeat; } .list .pic05{background: url(images/bg01.png) 0px -317px no-repeat; } /*background-attachment: fixed;*/ /* background-attachment 可使用background简写. 背景固定的设置方法. 设置了背景固定之后, 背景图片不会变动, 只有文字变动---较怪异. */ </style> </head> <body> <ul class="list"> <li class="pic01">1</li> <li class="pic02">2</li> <li class="pic03">3</li> <li class="pic04">4</li> <li class="pic05">5</li> </ul> </body> </html>