CSS背景

css背景

1. 背景顏色

   • banckground-clor屬性定義元素的背景顏色

   • background-color：顏色值；

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

2. 背景圖片

   • background-image屬性描述了元素的背景圖像。實際開發常見於LOGO或者一些裝飾性的小圖片或者超大的背景圖片，優勢是很是便於控制位置

   • background-image：none|url（url）

     參數值	做用
     none	無背景圖片
     url	使用絕對 或者相對地址指定圖片

3. 背景平鋪

   • 使用background-repeat屬性設置

   • background-repeat：repeat|no-repeat|repeat-x|repeat-y；

     參數值	做用
     repeat	平鋪
     no-repeat	不平鋪
     repeat-x	沿着x軸平鋪
     repeat-y	沿着y軸平鋪

4. 背景圖片位置

   • background-position屬性能夠改變圖片在背景中的位置

   • background-position：x y；

     參數值	說明
     length	百分數|由浮點數字和單位標識符組成的長度
     position	top|center|bottom|left|center|right 方位名詞

   • 參數是方位名詞

     • 若是指定的兩個值都是方位名詞，則兩個值先後順序無關，好比left top 和top left效果一致

   • 參數是精確單位

     • 若是參數值是精確座標，那麼第一個確定是x座標，第二個確定是Y座標

   • 混合單位

     • 若是指定的兩個值是精確單位和方位名詞混合使用，則第一個值是x座標，第二個值是Y座標

5. 背景圖像固定（北京附着）

   • background-altachment屬性設置背景圖像是否固定或者隨着頁面的其他部分滾動

   • background-altachment：scroll|fixed

     參數	做用
     scroll	背景圖像隨着對象內容滾動
     fixed	背景圖像固定

6. 背景屬性的複合寫法

   • background：背景顏色 背景圖片位置 背景平鋪 背景圖片位置

7. 背景色半透明

   • background：rgba（0，0，0，0.3）

   • 最後一個alpha透明度，取值範圍在0~1之間

屬性	做用	值
background-color	背景顏色	預約義的顏色值、十六進制、RGB代碼
background-image	背景圖片	url（圖片路徑）
background-repeat	是否平鋪	repeat、no-repeat、repeat-x、repeat-y
background-position	背景位置
background-altachment	背景附着	scroll（背景滾動）、fixed（背景固定）
背景簡寫	書寫更簡單	背景顏色 背景圖片位置 背景平鋪 背景圖片位置
背景半透明	背景顏色半透明	background：rgba（0，0，0，.3 ）