首先准備一張雪碧圖，Like this
背景圖片的定位方法有3種，比較常用的兩種為
關鍵字：background-position: top left; (top/bottom/cennter/left/right)
像素：background-position: 水平移動px 垂直移動px;
關鍵詞：
其中關鍵字方法background-position: top left 和left top效果是一樣的。（注意：如果您僅規定了一個關鍵詞，那么第二個值將是"center"。）
關於像素值的正負：負數方向為左/上 ，同理正數方向為右/下
他們背景定位的原點都是在左上角，如果能理解下面的代碼，說明上面兩種方法已經合格了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景定位練習</title> </head> <body> <style rel="stylesheet" type="text/css"> .box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 { float: left; width:100px; height: 100px; background: #666 url(18.png) no-repeat; margin-left: 10px; } .box1{background-position: -300px 0;} .box2{background-position: -200px 0;} .box3{background-position: -100px 0;} .box4{background-position:top left;} .box5{background-position: 0 -100px;} .box6{background-position: 0 -200px;} .box7{background-position:bottom left;} .box8{background-position:-300px -200px;} .box9{background-position:bottom right;} </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> <div class="box9"></div> </body> </html>
預覽效果為：
需要注意的是：在repeat的狀態下和默認的狀態下（默認即為repeat）,background-position是不起作用的!
下一節我們繼續講定位的第三種方法:
百分比：background-position: 0% 0%;
相關文章：
如何制作雪碧圖： photoshop：制作sprite拼貼圖片