學習要點：
1.設定背景
主講教師：李炎恢
本章主要探討 HTML5 中 CSS 邊框和背景，通過邊框和背景的樣式設定，給元素增加更豐富的外觀。
一．設定背景
盒模型的尺寸可以通過兩種方式實現可見性，一種就是之前的邊框，還有一種就是背景。 CSS 背景設定的樣式表如下：
|
屬性 |
說明 |
CSS 版本 |
|
background-color |
背景的顏色 |
1 |
|
background-image |
背景的圖片 |
1/3 |
|
background-repeat |
背景圖片的樣式 |
1/3 |
|
background-size |
背景影象的尺寸 |
3 |
|
background-position |
背景影象的位置 |
1 |
|
background-attachment |
背景圖片的滾動 |
1/3 |
|
background-clip |
背景圖片的裁剪 |
3 |
|
background-origin |
背景圖片起始點 |
3 |
|
background |
背景圖片簡寫方式 |
1 |
1.background-color
|
值 |
說明 |
CSS 版本 |
|
顏色 |
設定背景顏色為指定色 |
1 |
|
transparent |
設定背景顏色為透明色 |
1 |
div { background-color: silver; }
解釋：設定元素的背景顏色。屬性值是顏色值。
div b { background-color: transparent; }
解釋：預設值為 transparent，為透明的意思。這樣<div>內部的元素就會繼承<div>的背景色。一般來說這個屬性使用頻率很低，原因是不需要改變色彩時就預設，需要改變色彩時又是顏色值。
body { background-color: silver; }
解釋：在<body>元素下可以設定整個頁面的背景色。
2.background-image
|
值 |
說明 |
CSS 版本 |
|
none |
取消背景圖片的設定 |
1 |
|
url |
通過 URL 設定背景圖片 |
1 |
body { background-image: url(loading.gif); }
解釋：url 裡面是圖片的路徑，設定整個頁面以這個圖片為背景，如果圖片不足以覆蓋，則複製擴充套件。
div { background-image: none; }
解釋：如果多個 div 批量設定了背景，而其中某一個不需要背景，可以單獨設定 none 值取消背景。
在 CSS3 中，背景圖片還設定了比如線性、放射性等漸變方式。但由於支援度的問題，比如 IE9 尚未支援。我們把這些的新特性放到獨立的課程中講解。
3.background-repeat
|
值 |
說明 |
CSS 版本 |
|
repeat-x |
水平方向平鋪影象 |
1 |
|
repeat-y |
垂直方向平鋪影象 |
1 |
|
repeat |
水平和垂直方向同時平鋪影象 |
1 |
|
no-repeat |
禁止平鋪影象 |
1 |
body { background-image: url(loading.gif); background-repeat: no-repeat; }
解釋：讓背景圖片只顯示一個，不平鋪。CSS3 還提供了兩個值，由於支援度不佳，這裡忽略。
4.background-position
|
值 |
說明 |
CSS 版本 |
|
top |
將背景圖片定位到元素頂部 |
1 |
|
left |
將背景圖片定位到元素左部 |
1 |
|
right |
將背景圖片定位到元素右部 |
1 |
|
bottom |
將背景圖片定位到元素底部 |
1 |
|
center |
將背景圖片定位到元素中部 |
1 |
|
長度值 |
使用長度值偏移圖片的位置 |
1 |
|
百分數 |
使用百分數偏移圖片的位置 |
1 |
body { background-image: url(loading.gif); background-repeat: no-repeat; background-position: top; }
解釋：將背景圖片置於頁面上方，如果想置於左上方則值為：top left。
body { background-image: url(loading.gif); background-repeat: no-repeat; background-position: 20px 20px; }
解釋：使用長度值或百分數，第一值表示左邊，第二個值表示上邊。
5.background-size
|
值 |
說明 |
CSS 版本 |
|
auto |
預設值，影象以本尺寸顯示 |
3 |
|
cover |
等比例縮放影象，使影象至少覆蓋容器，但有可能超出容器 |
3 |
|
contain |
等比例縮放影象，使其寬度、高度中較大者與容器橫向或縱向重合 |
3 |
|
長度值 |
CSS 長度值，比如 px、em |
3 |
|
百分數 |
比如：100% |
3 |
body { background-image: url(loading.gif); background-size: cover; }
解釋：使用 cover 相當於 100%，全屏鋪面一張大圖，這個值非常實用。在等比例放大縮小的過程中，可能會有背景超出，當然，這點無傷大雅。
div { background-image: url(loading.gif); background-size: contain; }
解釋：使用 contain 表示，儘可能讓圖片完整的顯示在元素內。
body { background-image: url(loading.gif); background-size: 240px 240px; }
解釋：長度值的用法，分別表示長和高。
6.background-attachment
|
值 |
說明 |
CSS 版本 |
|
scroll |
預設值，背景固定在元素上，不會隨著內容一起滾動 |
1 |
|
fixed |
背景固定在視窗上，內容滾動時背景不動 |
1 |
body { background-image: url(loading.gif); background-attachment: fixed; }
解釋：fixed 屬性會導致背景產生水印效果，拖動滾動條而背景不動。
7.background-origin
|
值 |
說明 |
CSS 版本 |
|
border-box |
在元素盒子內部繪製背景 |
3 |
|
padding-box |
在內邊距盒子內部繪製背景 |
3 |
|
content-box |
在內容盒子內部繪製背景 |
3 |
div { width: 400px; height: 300px; border: 10px dashed red; padding: 50px; background-image: url(img.png); background-repeat: no-repeat; background-origin: content-box; }
解釋：設定背景起始位置。
8.background-clip
|
值 |
說明 |
CSS 版本 |
|
border-box |
在元素盒子內部裁剪背景 |
3 |
|
padding-box |
在內邊距盒子內部裁剪背景 |
3 |
|
content-box |
在內容黑子內部裁剪背景 |
3 |
div { width: 400px; height: 300px; border: 10px dashed red; padding: 50px; background-image: url(img.png); background-repeat: no-repeat; background-origin: border-box; background-clip: padding-box; }
解釋：在內邊距盒子內部裁剪背景。
9.background
div { width: 400px; height: 300px; border: 10px dashed red; padding: 50px; background: silver url(img.png) no-repeat scroll left top/100% border-box content-box; }
解釋：完整的簡寫順序如下：
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]/[background-size]
[background-origin]
[background-clip]