css知識點總結第三部分

背景

• background-color 設定背景顔色

• background-image 設定背景圖檔

  - 可以同時設定背景圖檔和背景顔色，這樣背景顔色将會成為圖檔的背景色

  - 如果背景圖檔小于元素，則背景圖檔會自動在元素中平鋪将元素鋪滿

  - 如果背景圖檔小于元素，将會一個部分背景無法完全顯示

  - 如果背景圖檔和元素一樣大，則會直接正常顯示

• background-repeat 用來設定背景重複的方式

  可選值：

  -repeat 預設值，背景會沿着x軸 y 軸雙方向重複

  -repeat-x 沿着x軸反向重複

  repeat-y 沿着y軸方向重複

  no - repeat 背景圖檔不重複

• background-position 用來設定背景圖檔的位置

  設定方式：

  通過top left right bottom center 幾個表示方位的詞來設定背景圖檔的位置

  使用方位詞的時候必須要同時指定兩個值，如股票緻謝一個，則第二個預設就是center；

  通過偏移量來指定背景圖檔的位置
         水準方向的偏移量  垂直方向的偏移量
             

• background-clip設定背景的範圍

  可選值：border-box預設值，背景會出現在邊框的下邊

  paddibg-box背景不會出現在邊框，隻出現在内容區和内邊框

  content-box背景隻會出現在内容區

• background-origin背景圖檔的偏移量計算的原點

  padding-box預設值， Background-position從内邊距處開始計算

  Content -box背景圖檔的偏移量從内容區處計算

  Border- box.背景圖檔的變量從邊框處開始計算

• Background-size設定背景圖檔的大小。第1個值表示寬度，第2個值表示高度。

  cover圖檔比例不變，元素鋪滿

  contain圖檔比例不變，圖檔在元素中顯示完成。

• Background -attachment.設定圖檔。是否跟随元素移動。

  可選值：

  Scroll預設值背景圖檔會跟随元素移動。

  Fixed背景會固定在頁面中，不會跟元素移動。

** Background背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設定**

注意：

Background size必須寫在background position後面，并且用/分開。

Background position/background size。

Background -Origin 和background- clip兩個樣式orgin要在clip前面。

圖檔屬于網頁中的外部資源，外部資源都需要浏覽器單獨發送請求加載，

浏覽器加載外部資源時是按需加載的，用則加載，不用則不加載像我們上邊的練習link會首先加載，而hover和active會在指定狀态觸發時才會加載