CSS的背景

CSS的背景

1. 背景顏色background-color

div {
    background-color: 顏色值;
}

通常狀況下元素背景顏色默認是transparent（透明）。

2. 背景圖片background-image

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

參數值	做用
none	無背景圖（默認值）
url	背景圖片的url地址

注：

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

3. 背景平鋪background-repeat

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

參數值	做用
repeat	背景圖片在縱向和橫向上平鋪（默認值）
no-repeat	不平鋪
repeat-x	在橫向上平鋪
repeat-y	在縱向上平鋪

4. 背景圖片位置background-position

div {
    background-position: x y;
}

參數表明的意思是：x座標和y座標。能夠使用方位名詞或精確單位。

參數值	說明
length（精確單位）	百分數，或具體數值（記得加px）
position（方位名詞）	top,center,bottom,left,right

1. 參數是精確單位時：
   • 第一個是x座標，第二個是y座標
   • 若是隻指定一個數值，則該數值必定是x座標，另外一個默認垂直居中
2. 參數是方位名詞時：
   • 若是指定了兩個方位名詞，則兩個值的順序無關
   • 若是隻指定了一個方位名詞，則第二個值默認居中對齊
3. 參數是混合單位時：
   • 第一個值是x座標，第二個值是y座標

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

用於設置背景圖像是否固定或隨着頁面的其他部分移動。

後期能夠製做視差滾動的效果。

div {
    background-attachment: scroll或fixed;
}

參數	做用
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. 總結

屬性	做用	值
background-color	背景顏色	預約義顏色值、十六進制、rgb代碼
background-image	背景圖片	url(圖片路徑)
background-repeat	是否平鋪	repeat、no-repeat、repeat-x、repeat-y
background-position	背景位置	length、position，分別是x和y座標，單位px
background-attachment	背景附着	scroll、fixed