CSS背景圖坐標(biāo)定位詳解及負(fù)數(shù)的使用技巧

背景圖像定位中我們要明確的幾點(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%)
如下圖:
相關(guān)文章
對(duì)背景圖定位中background-position屬性的自我理解
最近在項(xiàng)目中需要大量的用到很多標(biāo)簽按鈕什么的零碎圖片,加上一直沒機(jī)會(huì)使用Css中的”精靈技術(shù)“,這里把我對(duì)background-position的理解寫成文檔供更多人使用學(xué)習(xí);如果有2013-01-15在css3中background-clip屬性與background-origin屬性的用法介紹
困惑在哪里? background-clip 與 background-origin是css3中引入的兩個(gè)跟元素背景相關(guān)的屬性,它們有相同的可選值,即border、padding、content三種,而且這兩個(gè)屬性表示2012-11-13background-postion定位與圖片結(jié)合實(shí)現(xiàn)圓角效果
background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為:元素的左上角.2011-07-27CSS中背景background-position負(fù)值定位深入理解[圖文]
CSS中背景定位background-position負(fù)值一直是不好理解的難點(diǎn),一方面用的比較少,另一方面的理解的不夠深入,今天花了點(diǎn)時(shí)間認(rèn)真的思考了,把我的心得寫出來2011-03-21- 背景屬性是給網(wǎng)頁添加背景色或者背景圖所用的CSS樣式,它的能力遠(yuǎn)遠(yuǎn)超于html之上。2011-01-05
利用CSS定位背景圖片 background-position
我們?cè)谘芯科渌木W(wǎng)站的樣式的時(shí)候經(jīng)常會(huì)發(fā)現(xiàn)一種情況,就是在很多background屬性里都調(diào)用同一張圖片,來滿足網(wǎng)頁各個(gè)部分的使用。打開這種圖片看一下,會(huì)發(fā)現(xiàn)這張圖片上包2009-12-17CSS background-position的使用說明詳解
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響2009-12-17CSS background-position 屬性 定位圖片
看別人代碼發(fā)現(xiàn)一個(gè)背景圖中有很多圖片,大家可以參考下原理2009-11-20