這篇文章主要為大家展示了“對(duì)背景圖定位中background-position屬性怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“對(duì)背景圖定位中background-position屬性怎么用”這篇文章吧。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到信州網(wǎng)站設(shè)計(jì)與信州網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋信州地區(qū)。

最近在項(xiàng)目中需要大量的用到很多標(biāo)簽按鈕什么的零碎圖片，加上一直沒(méi)機(jī)會(huì)使用Css中的”精靈技術(shù)“，這里把我對(duì)background-position的理解寫成文檔供更多人使用學(xué)習(xí)。

現(xiàn)有所有按鈕圖片的合體

第一步：我們要顯示　　這個(gè)按鈕，那么我們要先定義一個(gè)div（后面我們稱為視窗）標(biāo)簽，寬度和高度剛好能把這個(gè)按鈕裝下就行。

第二步：這里便是我今天說(shuō)的重點(diǎn)。很多人說(shuō)background-position是操作的背景圖，我卻說(shuō)是操作的這個(gè)視窗，透過(guò)視窗我們能看到背景圖上的一部分而已。

橫縱坐標(biāo)的理解是，只要這個(gè)視窗在圖片的區(qū)域內(nèi)移動(dòng)我們都說(shuō)是負(fù)方向的（負(fù)坐標(biāo)）。

顯示這個(gè)圖片按鈕，我們不需要指定坐標(biāo)，默認(rèn)的就是他。當(dāng)然也可以  #div5{background-position: 0px 0px;}

顯示這個(gè)圖片按鈕，就必須的設(shè)置background-position的坐標(biāo)了，#div6{ background-position:-42px 0px;}

顯示這個(gè)圖片按鈕，#div8{ background-position:-42px -41px;}

后面的以此類推。

以上是“對(duì)背景圖定位中background-position屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！