CSS的背景

1. 背景顏色background-color

div {
    background-color: 顏色值;
}

一般情況下元素背景顏色預設是transparent（透明）。

2. 背景圖片background-image

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

注：

• 實際開發中常見於logo、一些裝飾性的小圖片，或著是超大的背景圖片
• 優點是非常便於控制位置，例如運用在精靈圖上

3. 背景平鋪background-repeat

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

4. 背景圖片位置background-position

div {
    background-position: x y;
}

引數代表的意思是：x座標和y座標。可以使用方位名詞或精確單位。

1. 引數是精確單位時：
   • 第一個是x座標，第二個是y座標
   • 如果只指定一個數值，則該數值一定是x座標，另一個預設垂直居中
2. 引數是方位名詞時：
   • 如果指定了兩個方位名詞，則兩個值的順序無關
   • 如果只指定了一個方位名詞，則第二個值預設居中對齊
3. 引數是混合單位時：
   • 第一個值是x座標，第二個值是y座標

5. 背景影象固定(背景附著)background-attachment

用於設定背景影象是否固定或隨著頁面的其餘部分移動。

後期可以製作視差滾動的效果。

div {
    background-attachment: scroll或fixed;
}
 

6. 背景複合寫法

當使用簡寫時，沒有特定的書寫順序，提倡順序為：

background: 背景顏色 背景圖片url地址 背景平鋪 背景影象滾動 背景圖片位置;

7. 背景色半透明

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

注：

• 最後一個引數是alpha（透明度），取值範圍在0~1之間
• 可以把最後一個引數0.3的0省略，寫為.3
• rgba必須是4個值
• 盒子背景半透明，盒子裡面的內容不受影響
• 這是CSS3新增屬性，ie9+才支援

8. 總結