忙里偷閑，寫一些筆記，還是蠻有意思的。

文章內(nèi)容輸出來源：拉勾教育大前端就業(yè)集訓(xùn)營

1.背景屬性

• 概述：CSS中除了布局類屬性，還需要添加一些背景類的內(nèi)容進(jìn)行頁面的修飾，從而讓網(wǎng)頁變得更加的美觀。

CSS通過background屬性來設(shè)置背景，它是一個綜合屬性，可以拆分成多個單一屬性。

2.背景顏色

• 屬性名：background-color
• 作用：在盒子區(qū)域添加背景顏色的修飾；
• 加載區(qū)域：在border及以內(nèi)加載背景顏色（margin不會加載）；

<style>
    div{
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px dashed red;
        margin: 10px;
        background-color: blue;
    }
</style>

說明：注意一下，border也是背景顏色的加載范圍，此處故意用“虛線樣式”就是為了讓大家看到邊框線下面的背景顏色。

3.背景圖片

• 屬性名：background-image
• 作用：給盒子添加圖片的背景修飾。
• 加載范圍：默認(rèn)的加載到邊框及以內(nèi)部分。后期如果圖片不重復(fù)加載，加載從border以內(nèi)開始。
• 屬性值：url(圖片路徑)

說明：背景圖片壓蓋背景顏色顯示，起始位置不包括border所在區(qū)域!

4.背景圖是否重復(fù)

• 屬性名：background-repeat
• 說明：設(shè)置添加的背景圖是否要在盒子中重復(fù)進(jìn)行加載。根據(jù)屬性值不同，有四種重復(fù)加載方式。
• 屬性值：

說明：repeat重復(fù)顯示圖片，border所在區(qū)域也會被填滿。

說明：no-repeat不重復(fù)顯示圖片，只會顯示一張圖片，且在盒子左上角border內(nèi)側(cè)展示。

說明：repeat-x水平方向重復(fù)，水平方向border所在區(qū)域也會被填滿。

說明：repeat-y垂直方向重復(fù)，垂直方向border所在區(qū)域也會被填滿。

5.背景圖片的定位

• 屬性名：background-position
• 作用：主要用于設(shè)置不重復(fù)的圖片在背景區(qū)域的開始加載位置。
• 屬性值：分為三種寫法，單詞表示法、像素表示法、百分比表示法。不論哪種寫法，屬性值都有兩個，值之間用空格分隔。
  • 第一個屬性值：表示背景圖片在水平方向的位置。
  • 第二個屬性值：表示背景圖片在垂直方向的位置。
• 單詞表示法：
  • 水平方向：left、center、right
  • 垂直方向：top、center、bottom
  • 單詞表示圖片與盒子背景區(qū)域進(jìn)行對應(yīng)方向的對齊。

說明：以圖片在盒子中的右下角位置舉例。

• 像素表示法：使用px為單位的數(shù)字，表示背景圖片左上角針對border以內(nèi)的左上頂點水平/垂直方向位移的距離。

說明：圖片的起始位置是border以內(nèi)！不算border所在區(qū)域！

說明：數(shù)值區(qū)分正負(fù)，負(fù)數(shù)就是對應(yīng)方向的反向。

• 百分比表示法：使用%為單位的數(shù)字，表示背景圖片左上角，在盒子border以內(nèi)的寬高 - 背景圖片的寬高，所在區(qū)域的位移距離。

說明：百分比表示法比較難以理解，以水平方向為例，100%代表的是：“盒子的width + 左右padding - 圖片寬度”的距離。工作中很少用到，了解即可。

6.背景附著

• 屬性名：background-attachment
• 作用：設(shè)置背景圖片是否要隨著頁面or盒子的滾動而滾動。
• 屬性值：

說明：scroll，背景圖片隨著瀏覽器窗口的滾動而滾動。

說明：fixed，瀏覽器窗口滾動，但是背景圖片固定在瀏覽器窗口上不動。
由于圖片是寫在div盒子里，所以圖片只能顯示在盒子范圍內(nèi)。

7.屬性綜合寫法

• 概述：background屬性可以將五個單一屬性的值進(jìn)行合寫。
• 寫法：可以有1-5個屬性值，值之間用空格進(jìn)行分隔，背景定位的兩個屬性值算作一個屬性值，不能被分開也不能顛倒順序。五個屬性值之間可以互換位置。

<style>
    .box3{
        width: 200px;
        height: 200px;
        background: pink right bottom url(jianshu.jpg) scroll no-repeat;
    }
</style>

說明：除了right bottom這兩個描述背景圖片位置的屬性之間不能換位外，其他的屬性值可以寫在任意位置。

• 注意事項：
  • 如果屬性值沒有設(shè)置完全，其他沒有設(shè)置的單一屬性會按照默認(rèn)值加載。
  • 如果想去層疊綜合屬性中的一部分，其他的屬性保持不變，最好使用單一屬性寫法進(jìn)行層疊。

 <style>
        div{
            background: url(jianshu.jpg) center center no-repeat scroll pink;
            background-color: red;
        }
</style>

說明：使用單一屬性background-color:red;層疊了綜合屬性中的pink。

8.背景屬性的實際應(yīng)用

應(yīng)用一：替換插入圖

• 問題：之前的課程中提到過，h1標(biāo)簽是權(quán)重最高的標(biāo)簽，影響著SEO搜索排名。如果直接放置公司的logo圖片，就不能書寫搜索關(guān)鍵字了。
• 解決方案：想要解決SEO問題，可在h1標(biāo)簽中輸入搜索關(guān)鍵字，然后用background屬性添加公司logo背景圖。

說明：這樣一來，既展示了logo，又搞定了關(guān)鍵字。但是你發(fā)現(xiàn)，文字影響了logo的展示，怎么辦？

說明：增加了一個text-indent屬性，屬性值為負(fù)數(shù)。相當(dāng)于把文字向左縮進(jìn)了1000px，所以文字被隱藏了。
文字隱藏還有一個辦法，將font-size設(shè)置為0，但是IE7以下版本瀏覽器會存在兼容問題，所以不推薦使用。

應(yīng)用二：padding區(qū)域背景圖

• 問題：無序列表或者有序列表中，每一項的前綴想要換成圖片怎么辦？
• 解決方案：將列表中的前綴消除后，為每一項增加padding-left屬性值，寬度以前綴圖片寬度決定；然后為每一項增加背景圖片，位置屬性值為left center即可。

說明：文字內(nèi)容只能顯示在width和height區(qū)域內(nèi)，增加padding-left的目的就是防止背景圖片和文字內(nèi)容發(fā)生重疊。

9.CSS3新增背景屬性

背景半透明

• 概述：CSS3 支持背景半透明的寫法，顏色值增加了一種rgba模式。
• rgba模式：在rgb基礎(chǔ)上增加了一個不透明度的設(shè)置，不透明度alpha取值范圍在0-1之間，0表示完全透明，1表示完全不透明，0.5 表示半透明。
• 書寫方式：rgba(紅色，綠色，藍(lán)色，不透明度)
• 注意：背景半透明是指盒子背景顏色半透明，盒子里面的內(nèi)容、盒子背景圖片不受影響。

    background-color: rgba(255,0,0,0.5);

說明：這里描述的顏色是透明度為50%的紅色。

說明：本來背景顏色應(yīng)該是亮紅色，因為只有20%的透明度，所以看起來很淡。

背景縮放

• 屬性名：background-size
• 作用：設(shè)置背景圖片的尺寸。
• 屬性值：

說明：第一個盒子中包裹的圖片是圖片的原尺寸大??；第二個盒子中的圖片是以寬度為200px，高度等比例縮放的效果；第三個盒子中的圖片，寬高分別設(shè)定為200px。

說明：第一個盒子中包裹的圖片是圖片的原尺寸大??；第二個盒子中的圖片是以盒子寬度為基準(zhǔn)的50%，高度等比例縮放的效果；第三個盒子中的圖片是以盒子寬度的50%，盒子高度的100%縮放的。

說明：第一個盒子中包裹的圖片是圖片的原尺寸大?。籧over會自動按比例縮放圖片，直至背景區(qū)域所有部分被圖片覆蓋。

說明：第一個盒子中包裹的圖片是圖片的原尺寸大??；contain會自動按比例縮放圖片，直至圖片在水平or垂直方向完全覆蓋背景區(qū)域為止。
因為原圖的寬度大于高度，所以是水平方向先完全覆蓋，所以停止縮放。

多背景

• 概述：CSS3 中規(guī)定，一個盒子上，可以添加多個背景圖片。
• 書寫方法：background-image 的屬性值書寫時，以逗號分隔多背景的URL路徑地址。
• 注意：背景加載時，先寫的背景壓蓋后寫的背景圖片。

<style>
        .box1{
            background-image:  url(star.jpg),url(jianshu.jpg),url(../baidu2.jpg);
        }
</style>

說明：路徑先寫的圖片，覆蓋后寫的圖片。星星圖片是最先寫的、然后是簡書logo、最后是百度圖片。

前端文章匯總目錄

http://www.itdecent.cn/p/6d80dd616ff4

結(jié)束語：一花一世界，一木一浮生，愿與諸君共勉~