背景圖像定位中我們要明確的幾點(diǎn)：

1、兩個(gè)值前面一個(gè)是橫向的定位，我們稱為x軸方向定位。后面一個(gè)值是縱向的定位，我們稱為y軸方向定位。如果只有一個(gè)值，那默認(rèn)的就是x軸方向，這時(shí)y軸方向就默認(rèn)的是上下居中對(duì)齊，也就是center。

2、坐標(biāo)軸的原點(diǎn)就是對(duì)應(yīng)容器的左頂點(diǎn)。

3、這個(gè)坐標(biāo)的y軸箭頭朝下，也就是右下方（容器內(nèi)部）x y的值才都為正。

4、x y值分別表示背景圖片的左頂點(diǎn)相對(duì)于坐標(biāo)原點(diǎn)（也就是容器的左頂點(diǎn)）的值。

5、x y的值可以用百分比或者px來表示。

6、x y也可以用“left、right、top、bottom、center”這五個(gè)對(duì)齊方式來表示，但注意：用“left、right、top、bottom、center”來表示的時(shí)候，應(yīng)用的是對(duì)齊規(guī)則，而不是坐標(biāo)規(guī)則。x為left是表示圖片的左邊和容器的左邊對(duì)齊，為right的時(shí)候表示圖片的右邊和容器的右邊對(duì)其，y為top的時(shí)候表示圖片的頂部和容器的頂部對(duì)齊，為bottom時(shí)表示圖片的底部和容器的底部對(duì)齊，x y等于center的時(shí)候表示居中對(duì)齊。

7、x y用百分比或者px表示的時(shí)候，其值可以為負(fù)數(shù)。我們應(yīng)用坐標(biāo)規(guī)則就很容易理解負(fù)數(shù)表示的意義，x為負(fù)數(shù)時(shí)候表示圖片左頂點(diǎn)在容器左頂點(diǎn)的左側(cè)，y為負(fù)數(shù)時(shí)表示圖片的左頂點(diǎn)在容器的左定點(diǎn)的上方。也就是向左和向上超出容器的范圍。

下面我用幾個(gè)圖示來說明一下幾種情況，藍(lán)色塊表示圖片，虛線框表示容器（可以div，td，或者直接就是body），注意只有背景圖片在容器內(nèi)我們才能看見，我用白色表示可見部分，而且超出容器范圍的是看不見的，我用灰色表示。容器的左定點(diǎn)的坐標(biāo)就是（0，0）。

第一張，背景圖片和容的左上對(duì)齊，0px 0px 也可以寫成left top
 
第二張，背景圖在容器中間，定點(diǎn)坐標(biāo)為正值
 
第三張，背景圖部分在容器左上，定點(diǎn)坐標(biāo)為負(fù)值
 
到此我們可能就明白了如何用background里的定位值來準(zhǔn)確定位一個(gè)背景圖片，返回去我們看一下開始的時(shí)候介紹的兩個(gè)圖片，我們就是可以用：背景定位和容器內(nèi)才可見這兩個(gè)性質(zhì)來隨意的調(diào)用整張圖片的某一部分。

但是我們?yōu)榱苏{(diào)用方便，在排列這些小圖片的時(shí)候要講究一點(diǎn)規(guī)則，比如：小圖之間的距離通常是調(diào)用小圖的容器的大小，或者距離更大一點(diǎn)，這樣就可以避免在容器內(nèi)顯示出我們不愿意顯示的圖片！

補(bǔ)充一點(diǎn)，如果定位用的是百分比話，算法比較特殊。我舉個(gè)例子：

代碼：

background:#FFF url(image) no-repeat fixed 50% -30%;

這個(gè)時(shí)候圖片應(yīng)該在容器的什么位置呢,算法公式如下：

圖片左頂點(diǎn)距容器左頂點(diǎn)的坐標(biāo)位置為

x：（容器的寬度-圖片的寬度）x50%

y：（容器的高度-圖片的高度）x（-30%）

得到的結(jié)果應(yīng)用坐標(biāo)法則，差值如果為負(fù)數(shù)，百分比為正那么運(yùn)算結(jié)果是負(fù)值。如果差值為負(fù)數(shù)，百分比也為負(fù)數(shù)，那么運(yùn)算結(jié)果就是正數(shù)?？偠灾褪沁@里的運(yùn)算符合運(yùn)算法則。把運(yùn)算的結(jié)果帶入坐標(biāo)法則就能得到圖片的位置。

比如：容器是width：600px；height：600px；而圖片是width：200px；height：200px；

我們用上面的樣式，可以得到圖片位置為：

x：(600px-200px)*50%

y：(600px-200px)*(-30%)

如下圖：

最新評(píng)論