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影片教學》

以上是css中background-position屬性用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！