CSS常規屬性
CSS3的常規屬性
背景屬性——background
在css中使用background屬性來設定背景，它的值有以下幾個：
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設定在一個聲明當中。 |
| background-color | 設定的是背景顏色。（顏色名 十六進位制 rgb() rgba()） |
| background-image | 設定背景影象，影象預設水平垂直平鋪 |
| background-repeat | 設定背景影象平鋪或者不平鋪 |
| background-attachment | 設定背景影象固定或者隨著頁面的區域部分滾動 |
| background-position | 設定背景影象的起始位置。 |
【注意】背景影象屬性background-image使用的是url函式，而不是herf屬性。
background-repeat：它的值有以下幾種：
repeat：背景影象將向垂直和水平方向重複。這是預設
repeat-x：只有水平位置會重複背景影象
repeat-y：只有垂直位置會重複背景影象
no-repeat：background-image不會重複
inherit：指定background-repea屬性設定應該從父元素繼承
body {
background-image: url(./img/test.jpg);
}
預設情況如下圖：
它會在水平和垂直方向上同時平鋪，即預設值repeat。
repeat-x：
body {
background-image: url(./img/test.jpg);
background-repeat: repeat-x;
}
結果：
repeat-y：
body {
background-image: url(./img/test.jpg);
background-repeat: repeat-y;
}
結果：
no-repeat：（不平鋪）
body {
background-image: url(./img/test.jpg);
background-repeat: no-repeat;
}
結果：
background-attachment：
scroll：背景圖片隨著頁面的滾動而滾動，這是預設的。
fixed：背景圖片不會隨著頁面的滾動而滾動
local：背景圖片會隨著元素內容的滾動而滾動。
bbackground-attachment：scroll：
預設值就是scroll，當滾動頁面的滾動條，它會隨著頁面滾動。
background-attachment：fixed：
這時就不會隨著頁面滾動。
background-position：背景圖片的定位 它的值有三種：方位組合性名詞，百分數，px。其中定位有兩個值，第一個值代表水平方向，達第二個代表垂直方向。
方位組合性名詞：（水平方向的方位名詞：left center right 垂直方向的方位名詞：top center bottom）
left top 左邊的上邊 預設值
left center：左邊的中間
left bottom：左邊的下邊
right top：右邊的上邊
right center：右邊的中間
right bottom：右邊的下邊
center top：中間的上面
center center：中間的中間
center bottom：中間的下面
對應上面的九個方位如下圖所示：
當只寫一個值時，第二個值預設為center：
body {
background-image: url(./img/test.jpg);
background-repeat: no-repeat;
height: 1500px;
background-position: center;/*水平方向上為center 省略的垂直預設為center*/
}
結果：
百分比值：第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 預設值為：0％0％ 水平居中：50% 50%
px：具體的定位，同樣也是兩個值，一個代表水平方向的，一個代表垂直方向的。百分比和px單位也是可以混用的，當然這裡也可以使用其他的單位，這裡我舉例使用的是px單位。
綜上所述，我們可以把背景的幾個屬性寫在一個屬性中：background
注意一下他的書寫順序：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
如下述程式碼：
body {
height: 1500px;
background: url(img/test.jpg) no-repeat fixed center;/*background屬性的簡寫*/
}
【注意】各個屬性值之間使用空格連線。
CSS3中新增的背景屬性
多背景
在css3中新增了幾個背景屬性，其中對background-image進行了進一步的優化，即可以引入多個背景圖片，之前的版本之呢個使用一個圖片作為背景。
div {
width: 500px;
height: 500px;
background-image: url(img/01.gif),url(img/02.gif);/*同時使用兩張圖片作為背景，中間使用逗號隔開*/
background-repeat: no-repeat,repeat;/*對於兩個背景，分貝使用兩個不同的屬性值設定 中間使用逗號隔開*/
background-position: right bottom,center;
}
結果：
background-size：指定背景影象的大小
在之前 版本中，背景影象的大小隻能由它的實際大俠來決定，該屬性則是用於設定背景影象的大小。
同樣也是兩個值，分別代表寬度和高度，可以使用百分比，也可以使用px單位。
div {
width: 500px;
height: 500px;
background-image: url(img/01.gif);
background-repeat: no-repeat;
background-position:center;
}
.block {
background-size: 70px 70px;
}
background-origin：設定背景繪製的區域
該屬性用於設定背景繪製的區域，它的值有以下幾種：
border-box：預設值。背景繪製在邊框方框內（剪下成邊框方框）。
padding-box：背景繪製在襯距方框內（剪下成襯距方框）。
content-box： 背景繪製在內容方框內（剪下成內容方框）。
div {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: red;
border: 10px dotted black;
}
預設情況下：
背景顏色的覆蓋範圍從邊框開始，同時也是border-box的效果，預設值。
background-clip: padding-box：
背景繪製區域從內邊距開始（內邊距的最外層就是邊框）
background-clip：content-box：
背景區域的繪製將會從內容部分開始
background-origin：指定背景影象的位置區域
它的值跟上面的background-clip一樣，只不過這個屬性針對的是背景影象，上面的background-clip針對的是背景繪製的顏色
background-origin：border-box
background-origin：padding-box:（預設值）
background-origin：content-box
【注意】如盒子沒有內邊距，那麼設定了content-box和padding的效果是一樣的。