background相關屬性

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

padding-box 背景影象相對於內邊距框來定位；（預設）

border-box背景影象相對於邊框盒來定位；

content-box背景影象相對於內容框來定位。

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

預設值：0 0（從背景圖的左上點開始顯示）；

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

如果只設定乙個值，另乙個值將為「居中」（50%/center）

如果採用百分數，則按如下公式計算座標：

所以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相關屬性

background origin 規定 background position 屬性相對於容器的哪一部分來定位。padding box 背景影象相對於內邊距框來定位 預設 border box背景影象相對於邊框盒來定位 content box背景影象相對於內容框來定位。background pos...

background背景相關屬性詳解

css背景縮寫屬性可以在乙個宣告中設定所有的背景屬性,css背景影象支援引入多個影象.主要屬性有 background color,background image,background repeat,background position,background attachment,backgro...

background簡寫屬性

在css中有多個屬性用於設定背景樣式，其中 background color 設定背景顏色。background repeat 設定是否以及如何重複背景影象 background position 設定背景影象的起始位置 background attachment 設定背景影象是否固定或者隨著頁面的...