css2--背景

來源:互聯網
上載者:User

標籤:情境   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--背景

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: