CSS 中除了布局類屬性，還需要添加一些背景類的內(nèi)容進行頁面的修 飾，從而讓網(wǎng)頁變得更加的美觀。 CSS 中通過 background 屬性來設(shè)置背景，它是一個綜合屬性，可以拆分成多個單一屬性。
背景顏色 background-color
background-color用于在盒子區(qū)域添加背景顏色的修飾，背景顏色的加載區(qū)域在border及以內(nèi)，屬性值是顏色名或顏色值。
背景圖片 background-image
background-image用于給盒子添加圖片的背景修飾，默認加載到邊框及以內(nèi)部分，如果圖片不重復(fù)加載，則加載從border以內(nèi)開始，屬性值是url（圖片路徑），uniform resource locator，統(tǒng)一資源定位符，括號內(nèi)書寫查找圖片的路徑。
背景重復(fù) background-repeat
background-repeat用于設(shè)置添加背景圖是否在盒子中重復(fù)進行加載。根據(jù)屬性值不同有以下四種重復(fù)加載方式：
| 屬性值 | 作用 |
|---|---|
| repeat | 重復(fù)，默認屬性值，表示會使用背景圖片重復(fù)加載填滿整個盒子背景區(qū)域 |
| no-repeat | 不重復(fù)，不論背景圖是否大于盒子范圍，都只加載一次圖片 |
| repeat-x | 水平重復(fù)，使用背景圖片水平重復(fù)加載鋪滿第一行，垂直方向不重復(fù) |
| repeat-y | 垂直重復(fù)，使用背景圖片垂直重復(fù)加載鋪滿第一列，水平方向不重復(fù) |
背景定位 background-position
background-position主要用于設(shè)置不重復(fù)的圖片在背景區(qū)域的加載開始位置，屬性值分三種寫法，單詞表示法、像素表示法、百分比表示法。不論哪種寫法，屬性值都有兩個，值之間用空格分隔，第一個屬性值表示背景圖片在水平方向的位置，第二個屬性值表示垂直方向的位置。
單詞表示法：屬性值都是使用代表方向的單詞進行書寫，水平方向可選單詞
left、center、right，垂直方向可以選單詞top、center、bottom，單詞表示圖片與盒子背景區(qū)域進行對應(yīng)方向的對齊。-
像素表示法：使用像素值作為背景定位的屬性值，第一個屬性值表示背景圖片左上角針對
border以內(nèi)的左上角頂點水平方向位移的距離，第二個屬性值表示垂直方向位移的距離。可以利用屬性值為負數(shù)，制作在小盒子中顯示大的背景圖的一部分。 -
百分比表示法：使用百分比數(shù)字作為屬性值。水平方向100%的數(shù)值等價于盒子的
border以內(nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度，垂直方向100%等價于高度減去圖片的高度。
背景附著 background-attachment
background-attachment用于設(shè)置背景圖片是否要隨著頁面或者盒子的滾動而滾動。
| 屬性值 | 說明 |
|---|---|
| scroll | 滾動的，表示背景圖片與盒子保持相對位置不變，隨著頁面的滾動而滾走。 |
| fixed | 固定的，背景圖的定位的參考點從盒子 border 以內(nèi)的左上頂點變?yōu)榱藶g覽器窗口的左 上頂點，頁面滾動時，瀏覽器窗口的左上頂點是不變的，導(dǎo)致背景圖固定在瀏覽器窗口的某個位置，不會隨著頁面滾動而滾走。 |
綜合寫法 background
background可以將五個單一屬性的值進行合寫，可以有1-5個屬性值，值之間用空格進行分隔，背景定位的兩個屬性值算作一個屬性值，不能分開也不能顛倒順序，五個屬性值之間可以互換位置。
<style>
div { background: url(images/bg4.jpg) no-repeat center top fixed #fff; }
</style>
注意：
① 如果屬性值沒有設(shè)置完全，其他沒有設(shè)置的單一屬性會按照默認值加載。
<style>
div { background: #00f; }
</style>
② 如果想去層疊綜合屬性中的一部分，其他屬性保持不變，最好實用單一屬性寫法進行層疊。
<style>
div {
background: url(images/bg4.jpg) no-repeat center top fixed #fff;
background-attachment: scroll;
}
</style>
背景應(yīng)用
替換插入圖
<h1>標簽是權(quán)重最高的標簽，一般會在內(nèi)部書寫最重要的內(nèi)容，比如logo圖片、最大的標題等。另外<h1>內(nèi)部的文字，可以幫助提高SEO搜索排名，在設(shè)置的是logo圖片時，如果使用插入圖，就不能書寫搜索關(guān)鍵字。
<h1><a href="#"><img src="images/logo.png"></a></h1>
如果想解決SEO問題，可以將HTML結(jié)構(gòu)中，插入圖換成搜索關(guān)鍵字，然后使用CSS添加背景圖給<a>標簽或<h1>標簽。
可以通過以下兩個方法隱藏文字：
① 將字號設(shè)置為0。IE8及以上或者高版本瀏覽器可以隱藏文字，但是IE7及以下有兼容問題。
② 可以設(shè)置給<a>標簽一個text-indent，屬性值設(shè)為負數(shù)且數(shù)值很大，文字會走到盒子外部，再設(shè)置溢出隱藏，將溢出文字隱藏起來。
padding 區(qū)域背景圖
在一個盒子中，背景圖是和文字重疊的，而上圖中列表的星標效果就是通過每個<li>元素的圖片背景圖居右顯示之后，再通過padding-left將文字擠開，使得星標背景處于文字的左側(cè)。
精靈圖技術(shù)
當用戶訪問一個網(wǎng)站時，需要向服務(wù)器發(fā)送請求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶。然而，一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾，當網(wǎng)頁中的圖像過多時， 服務(wù)器就會頻繁地接受和發(fā)送請求，這將大大降低頁面的加載速度。 為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了 CSS 精靈技術(shù)（也稱 CSS Sprites、CSS 雪碧）。
CSS 精靈是一種處理網(wǎng)頁背景圖像的方式。 它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用 于網(wǎng)頁，這樣，當用戶訪問該頁面時，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖 像即可全部展示出來。 通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖。
技術(shù)依據(jù)：① 將網(wǎng)頁中需要用到的小尺寸背景圖制作成一張背景透明的 png 圖片。 ② 利用背景定位技術(shù)，將精靈圖的每個小圖片加載到對應(yīng)的標簽上。（可以使用一些小工具，快速生成精靈圖。）前端必備 CSS Sprites雪碧圖生成工具 - 簡書 (jianshu.com)
注意事項：
- 精靈圖上放的都是小的裝飾性質(zhì)的背景圖片，插入圖片不能往上放。
- 精靈圖的寬度取決于最寬的那個背景圖片的標簽寬度。
- 精靈圖可以橫向擺放也可以縱向擺放，但是每個圖片之間必須留夠足夠的空白， 保證背景圖片加載到一個標簽內(nèi)部時，不能出現(xiàn)多余內(nèi)容。
- 在精靈圖的最底端，盡量留一點空白，方便以后添加其他精靈圖。
CSS3新增背景屬性
背景半透明
CSS3 支持背景半透明的寫法，顏色值增加了一種 rgba 模式，在 rgb 基礎(chǔ)上增加了一個不透明度的設(shè)置，不透明度 alpha 取值范圍在 0-1 之間，0 表示完全透明，1 表示完全不透明，0.5 表示半透明,背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響，書寫方式：rgba(紅色，綠色，藍色，不透明度)，同樣可以給文字和邊框用rgba的格式設(shè)置半透明。
背景縮放 background-size
通過 background-size 設(shè)置背景圖片的尺寸，就像我們設(shè)置 <img> 的尺寸一樣，在 移動 Web 開發(fā)中做屏幕適配應(yīng)用非常廣泛。
| 屬性值 | 說明 |
|---|---|
| px值 | 1-2個像素值，只設(shè)置1個值，垂直方向等比例拉伸；設(shè)置2個值，按照設(shè)置值加載。 |
| 百分比 | 同像素值設(shè)置方法相同，設(shè)置百分比時，數(shù)值參照盒子的寬、高屬性 |
| cover | 自動調(diào)整縮放比例，把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。如有溢出部分則會被隱藏。 |
| contain | 自動調(diào)整縮放比例，把圖像圖像擴展至最大尺寸，保證圖片始終完整顯示在背景區(qū)域。 |
多背景
CSS3 中規(guī)定，一個盒子上，可以添加多個背景圖片。 background-image 的屬性值書寫時，以逗號分隔多背景的URL路徑地址。 注意：背景加載時，先寫的背景壓蓋后寫的背景圖片。
