咱們都知道background-position
屬性用來指定背景圖片應該出現的位置,可使用關鍵字、絕對值和相對值進行指定。在CSS Sprites中,這個屬性使用比較頻繁,使用過程當中,我常混淆,常常切不到本身想要的效果,因而決定好好理解其工做機制,這篇文章就是介紹background-position
屬性是如何指定背景圖片和背景區域的位置關係。 css
注意:segmentfault對CodePen嵌入支持度不是很好,爲使文章整潔,我將嵌入代碼所有刪除,完總體驗請猛戳此處!html
我使用ps製做了一張400px × 400px的圖片做爲背景圖片。 segmentfault
此處應有代碼,猛戳此處! 服務器
爲了更好理解background-position
屬性定位的機制,咱們能夠將指定背景區域想象爲一個平面直角座標系,原點在左上角,x軸正方向從左到右,y軸正方向從上到下,這點和日常向上爲y軸正方向的座標系有所不一樣。在這個座標系中,經過指定x、y的座標值定位一個點,此點便是背景圖片的左上角。 code
此處應有代碼,猛戳此處! htm
如上圖所示,background-position
指定值200px
和300px
,即x爲200px
,y爲300px
,此點所在位置就是背景圖片的左上角,由於部分背景圖片因溢出背景區域被裁剪,就只剩下200px × 100px的左上角部分。 blog
此處應有代碼,猛戳此處! 圖片
能夠指定正值就固然能夠指定負值,如上所示,此時左上角被定位在(0px, -300px)
處,由於向上爲y軸負方向,背景圖片上半的300px就因溢出被切除了,只留下400px × 100px的下部分。 get
此處應有代碼,猛戳此處! it
除了使用絕對值,也可使用相對值指定。使用相對值時,定位方式直觀上很差理解。但應清楚,最基本的方法是根據絕對值定位。使用相對值時它會將其轉換,最終仍是根據絕對值指定背景圖片的左上角,轉化的依據是x = (容器的寬度-圖片的寬度) * percentX;y = (容器的高度-圖片的高度) * percentY
。上圖通過計算,背景圖片左上角被定位在(-200px, 0px)
處,故背景圖片被切除一半。
咱們也能夠經過關鍵字top
、bottom
、left
、right
和center
指定background-position
屬性,你們應該都喜歡這種簡單明瞭的方式吧。通常指定兩個關鍵字,若是隻有一個,則另外一個默認是center
。這種方式也最終將轉化成絕對值定位,不過先會轉換成百分比,top
、bottom
、left
、right
和center
分別至關於0%
、100%
、0%
、100%
和50%
。上圖中的background-position: right bottom;
和background-position: 100% 100%;
效果是如出一轍的。
使用上面介紹的理解方式,相信仍是很好理解background-position
的定位原理的。我想,background-position
多數使用場景應該就是CSS Sprites了。CSS Sprites是一種網頁圖片應用處理方式,將一個頁面涉及到的零星圖片都包含到一張大圖中去。這樣一來,當訪問該頁面時,客戶端只須要向服務器請求少許的圖片,圖片越多請求次數越少,形成延遲的可能性也就越小,能有效減輕服務器的壓力;接下來應用CSS屬性的background-image
、background-position
的組合進行背景定位,用數字精確地定位出背景圖片的位置。