第 17 章 CSS 邊框與背景[下] · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 17 章 CSS 邊框與背景[下] 學習要點： 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]