首頁 > web前端 > css教學 > 主體

css中background-position屬性用法總結

伊谢尔伦
發布: 2017-06-08 14:25:41
原創
3364 人瀏覽過

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

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

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

CSS 0基础入门教程

css中background-position屬性用法總結

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!