CSS的背景

顏色background-color">1. 背景顏色background-color

div {
    background-color: 顏色值;
}

一般情況下元素背景顏色默認(rèn)是transparent（透明）。

2. 背景圖片background-image

div {
    background-image: none或url(圖片的url);
}

注：

• 實(shí)際開發(fā)中常見于logo、一些裝飾性的小圖片，或著是超大的背景圖片
• 優(yōu)點(diǎn)是非常便于控制位置，例如運(yùn)用在精靈圖上

3. 背景平鋪background-repeat

div {
    background-repeat: repeat或no-repeat或repeat-x或repeat-y;
}

4. 背景圖片位置background-position

div {
    background-position: x y;
}

參數(shù)代表的意思是：x坐標(biāo)和y坐標(biāo)?？梢允褂?mark>方位名詞或精確單位。

1. 參數(shù)是精確單位時(shí)：
   • 第一個(gè)是x坐標(biāo)，第二個(gè)是y坐標(biāo)
   • 如果只指定一個(gè)數(shù)值，則該數(shù)值一定是x坐標(biāo)，另一個(gè)默認(rèn)垂直居中
2. 參數(shù)是方位名詞時(shí)：
   • 如果指定了兩個(gè)方位名詞，則兩個(gè)值的順序無關(guān)
   • 如果只指定了一個(gè)方位名詞，則第二個(gè)值默認(rèn)居中對(duì)齊
3. 參數(shù)是混合單位時(shí)：
   • 第一個(gè)值是x坐標(biāo)，第二個(gè)值是y坐標(biāo)

5. 背景圖像固定(背景附著)background-attachment

用于設(shè)置背景圖像是否固定或隨著頁面的其余部分移動(dòng)。

后期可以制作視差滾動(dòng)的效果。

div {
    background-attachment: scroll或fixed;
}

6. 背景復(fù)合寫法

當(dāng)使用簡(jiǎn)寫時(shí)，沒有特定的書寫順序，提倡順序?yàn)椋?/p>

background: 背景顏色 背景圖片url地址 背景平鋪 背景圖像滾動(dòng) 背景圖片位置;

7. 背景色半透明

background: rgba(0,0,0,0.3);

注：

• 最后一個(gè)參數(shù)是alpha（透明度），取值范圍在0~1之間
• 可以把最后一個(gè)參數(shù)0.3的0省略，寫為.3
• rgba必須是4個(gè)值
• 盒子背景半透明，盒子里面的內(nèi)容不受影響
• 這是CSS3新增屬性，ie9+才支持

8. 總結(jié)