首頁 > web前端 > css教學 > background相關屬性的詳細介紹

background相關屬性的詳細介紹

高洛峰
發布: 2017-03-14 15:35:09
原創
1218 人瀏覽過

background-origin: 規定 background-position 屬性相對於容器的哪一部分來定位。

  padding-box 背景圖片相對於內邊距方塊來定位;(預設)

  b order-box背景圖片相對於邊框盒來定位;

  content-box背景圖片相對於內容框來定位。

background-position:設定背景影像在容器顯示的起始位置。

  預設值:0 0(從背景圖的左上點開始顯示);

  取值:Int px  Int px;背景圖的左上定點在容器的座標位置,可以為負值。負值表示背景圖左上點不在容器內,超出的部分隱藏。

  若只設定一個值,另一個值將為「居中」(50%/center)

  若採用百分數,則依下列公式計算座標:

  x :(容器的寬度—背景圖片的寬度)*x百分比,超出的部分隱藏;y:(容器的高度—背景圖片的高度)*y百分比,超出的部分隱藏。

   所以left/top等價於0%,right/bottom等價於100%(背景圖的右邊/底邊和容器重合),center等價於50%(背景圖在容器中間)。

background-size:設定背景圖的大小(IE8不支援此屬性)

  百分比/length:若為百分數,背景圖的尺寸為容器乘以百分數的乘積。只設一個,第二個為auto(以保持和原始背景圖一樣的長寬比例)。

  如果都設為100%,則背景圖會鋪滿容器,但長寬比率會改變。

  contain:容器依背景圖的固定比例包含整個背景圖。背景圖的尺寸以背景圖按固定比例放大,其任一條邊到達容器的邊界為止,經常會導致另一邊空白(有no-repeat時)。

  cover:背景圖以固定長寬比放大,至填滿整個容器為止(背景圖短一點的那條邊也到達容器邊界)。有一部分的背景圖會因為超出容器而切除。

IE8相容:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='絕對路徑',sizingMethod='scale/crop');

  crop : 背景圖大小不變,剪下圖片以適應區域尺寸。

  image : 預設值。增加或縮小區域的尺寸邊界以適應背景圖的尺寸,相當於overflow:visible的效果。

  scale : 縮放背景圖以適應區域的尺寸邊界。

  ①不能指定任意大小background百分比②只適合單張圖片不能使用圖片精靈等拼圖③要引用絕對路徑圖片④相容ie7,8

以上皆為個人理解,如有錯誤之處,歡迎留言指正。


以上是background相關屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板