background
常見背景屬性:
| 屬性 | 描述 |
|---|---|
| background-color | 規定要使用的背景顏色 |
| background-image | 規定要是用的背景圖像 |
| background-size | 規定背景圖像的尺寸 |
| background-repeat | 規定如何重復背景圖像 |
| background-attachment | 規定背景圖像是否固定或者隨着頁面的其他部分滾動 |
| background-position | 規定背景圖像的位置 |
| inherit | 規定從父元素繼承background屬性的設置 |
background-image
background-image 屬性為元素設置背景圖像
元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距
默認的，背景圖像位於元素的左上角，並在水平和垂直方向上重復
background-repeat 設置元素平鋪的方式
屬性值：
| 值 | 描述 |
|---|---|
| repeat | 默認。背景圖像將在水平和垂直方向上重復 |
| repeat-x | 背景圖像將在水平方向上重復 |
| repeat-y | 背景圖像將在垂直方向上重復 |
| no-repeat | 背景圖像將僅顯示一次 |
| inherit | 繼承父元素background-repeat 屬性值 |
background-position
background-position: 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置
屬性值：
background-attachment
background-attachment 屬性設置背景圖像是否固定或者隨着頁面的其余部分滾動。
屬性值：
| 值 | 描述 |
|---|---|
| scroll | 默認值。背景圖像會隨着頁面其余部分的滾動而滾動 |
| fixed | 當頁面的其余部分滾動時，背景圖像不會移動 |
| inherit | 規定應該從父元素繼承 background-attachment 屬性的設置。 |
雪碧圖技術(精靈圖技術)
CSS 雪碧即 CSS Sprite，也叫CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分
CSS 雪碧圖應用原理就是截取大圖一部分顯示，而這部分就是一個小圖標
使用雪碧圖的好處：
- 利用CSS Sprite能很好的減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
- CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
- 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便
缺點:
- CSS雪碧的最大問題是內存使用
- 拼圖維護比較麻煩
- 使CSS的編寫變得困難
- CSS 雪碧調用的圖片不能被打印
我們可以使用background綜合屬性制作通天banner，什么是通天banner呢，就是一般我們電腦的屏幕都是1439.但是設計師給我們的banner圖都會比這個大，
那么我們可以此屬性來制作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;