background-repeat:默认是平铺的，也即是还有空间的话将一张接着一张显示
设置为 no-repeat 就最多显示一张
background-attachment:设置是否固定图片，在有滚动条的页面，随着滚动条的移动将会看到图片的不同位置
看下面的例子；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*权重：数数 id class 标签*/ /*100*/ #box { border: 1px solid red; /*设置边框*/ width: 200px; /*图片显示的范围*/ height: 200px; background-image: url("./timg.jpg"); background-repeat: no-repeat; /*默认平铺，no-repeat不平铺，就打印本身一张图片*/ /*background-position: 20px 20px; !*相对原来位置移动*!*/ background-position-x: -635px; /*控制图片x方向的移动*/ background-position-y: -250px; /*控制图片y方向的移动*/ background-attachment:fixed; /*设置这条可以滚动条看到的是图片的不同位置*/ } .box2 { width: 24px; height: 33px; background: url("taobao.png") no-repeat 0 -265px; background-attachment: fixed; } </style> </head> <body style="height:2000px;"> /*2000px让其有滚动条*/ <div id="box" class="box"></div> <div class="box2"></div> </body> </html>