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 中正常運作。
對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來顯示需要顯示的部分。
3. 關於background-position百分比的問題?
【相關推薦】
1. php中文網免費教學:《CSS 線上手冊》
2. php中文網免費影片教學:《彈指間學會HTML影片教學》
3. php中文網免費影片教學:《php.cn獨孤九賤(2)-css影片教學》
以上是css中background-position屬性用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!