css中background-position屬性用法總結

background屬性是CSS中最常見的屬性之一，要想實現CSS摳圖，只需要用到一個屬性：background-position。background-position是用來控制元素背景圖片的位置。技巧是，實際上指定的是圖片左上方相對於元素左上方的位置。它接受三種值：關鍵詞，比如top、right、bottom、left和center；長度值，比如px、em、rem等；百分值%。下面的內容就來聊一聊有關background-position屬性用法的話題。

首先可以學習php中文網相關的免費課程

1. 學習《CSS 0基礎入門教程》中的 CSS背景 章節課程

2. 觀看《黑馬程式員css視頻教程》中的 背景和邊距 視頻課程

background-position屬性用法

1. css background-position屬性

background-position 屬性設定背景映像的起始位置。

這個屬性設定背景原映像（由 background-image 定義）的位置，背景映像如果要重複，將從這一點開始。

提示：您需要把 background-attachment 屬性設定為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

2. background-position百分比原理

對background-size:100% auto，意思是背景圖片寬度為元素寬度*100%，高度等比縮放。詳情可見css3 background。

對background-position很自然的以為百分比是根據父元素寬度計算的，但background-position真的不是，它有一套自己的原理。

3. CSS中background-position的使用

兩個值前面一個是橫向的定位，我們稱為x軸方向定位。後面一個值是縱向的定位，我們稱為y軸方向定位。如果只有一個值，那預設的就是x軸方向，這時y軸方向就預設的是上下置中對齊，也就是center。

4. css使用background-position屬性來完成雪碧圖的代碼詳解

雪碧圖就是CSS Sprite，也有人叫它CSS精靈，是一種CSS映像合并技術，就是把多張小表徵圖合并到一張圖片上，然後用css的background-position來顯示需要顯示的部分。

可以減少載入網頁圖片時對伺服器的請求次數，提高頁面的載入速度，解決IE6滑鼠滑過時出現閃白的現象。

5. background系列之你不知道的background-position

我們知道 background-position 是用來指定背景映像的位移值的，能讓一張圖從特定的位置開始展現。而 CSS Sprites 就是通過將多個小圖拼接成一張大圖，然後利用 background-position 來指定需要顯示的地區，以此達到合并HTTP請求的預期。

相關問答

1. background-position截取圖片後會有個邊框去不掉

2.background-position使用疑惑。

3. 關於background-position百分比的問題？

【相關推薦】

1. php中文網免費教程：《CSS 線上手冊》

2. php中文網免費視頻教程：《彈指間學會HTML視頻教程》

3. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》