上一篇文章中我們了解了使用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視頻教程