站長(zhǎng)資訊網(wǎng)上一篇文章中我們了解了使用background-origin屬性定位元素背景圖像的方法，請(qǐng)看《一招搞定css相對(duì)原點(diǎn)定位背景圖片》。這次我們來(lái)了解一下定位元素背景圖像的方法，有需要的可以參考參考。
在上一篇文章中，小栗子里有我們要介紹的這個(gè)屬性，不知道你們還記不記得，不記得的回去看看。上篇文章主要是介紹background-origin這個(gè)屬性，所以就沒(méi)有說(shuō)其他的了，今天我們著重介紹background-position這個(gè)屬性。
首先我們來(lái)看一個(gè)小栗子。
<style> div{ background-image: url("images/3.jpg"); background-repeat:no-repeat; background-position:left; } </style> </head> <body><div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> </div> </body>
這個(gè)小例子的結(jié)果是
我們可以看到，當(dāng)我們將“background-position:left;”的效果取消掉的時(shí)候，可以發(fā)現(xiàn)原來(lái)在下方的背景圖一下子就跑到頂部了。將“background-position:left;”的效果勾選上的時(shí)候，這個(gè)背景圖又跑回原位置了?？磥?lái)background-position這個(gè)屬性才是背景圖移動(dòng)的關(guān)鍵啊，那就看看這個(gè)屬性吧。
background-position屬性設(shè)置背景圖像的起始位置。這個(gè)屬性設(shè)置背景原圖像（由background-image定義）的位置，背景圖像如果要重復(fù)，將從這一點(diǎn)開(kāi)始。
這個(gè)屬性的屬性值有點(diǎn)多，為了大家方便理解，我就直接發(fā)一個(gè)圖表，可以對(duì)著圖表去看。
當(dāng)然這個(gè)屬性可以寫(xiě)一個(gè)，也可以寫(xiě)兩個(gè)啦。
推薦學(xué)習(xí)：css視頻教程
