css2--背景

標籤：情境   otto   重複   no-repeat   ima   top   樣式   簡寫   通過   

## CSS2 背景
##### background-color 設定背景顏色

##### background-image 設定背景圖片
- ````background-image：url（"圖片的路徑"）;````

##### background-repeat 設定背景圖片的重複方式

- repeat 預設值. 使背景圖片在水平和垂直兩個方向重複.以鋪滿元素
- repeat-x 水平方向重複
- repeat-y 垂直方向重複
- no-repeat 圖片不重複

##### background-position 設定背景圖片顯示位置
- 預設背景圖片是從左上方開始顯示.
- 設定方式:
1. 通過位置的關鍵字來設定背景圖片的位置
- left top right bottom center
- 使用這些關鍵字兩兩組合設定圖片位置
- 如果只設定一個關鍵字則第二個預設為center
2. 可以指定一個水平方向和垂直方向的位移量來設定圖片位置
- background-position：x位移量 y位移量
- x位移量：正值 向右移動；負值 向左移動
- y位移量：正值 向下移動；負值 向上移動

##### background-attachment 設定背景圖片是否隨螢幕滾動

- scroll 預設值. 背景會隨螢幕滾動
- fixed 背景相對於視窗固定定位.不會隨螢幕滾動
- 使用情境: 網頁的整體背景

##### background 簡寫
- 可以同時設定所有的背景相關的樣式
- 對樣式的編寫順序和數量沒有任何要求
- 多個背景圖片之間可以用逗號隔開
- ````background：red url() no-repeat top center````

##### img標籤和background-image的區別
1.使用img元素引入圖片,圖片與網頁同步載入,如果網頁過大,影響頁面載入速度

- 使用img的情境: 重要的頁面圖片元素.例如 網站logo,商品圖片

2.使用背景圖引入圖片,網頁載入後,或者與網頁一起載入.不會影響頁面的載入速度

- 使用背景圖片的情境:非重要的頁面圖片元素,例如 小圖片

css2--背景