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 默認值，背景會出現(xiàn)在邊框的下邊
• padding-box 背景不會出現(xiàn)在邊框坦敌，只出現(xiàn)在內(nèi)容區(qū)和內(nèi)邊距
• content-box 背景只會出現(xiàn)在內(nèi)容區(qū)

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

• padding-box 默認值，background-position從內(nèi)邊距處開始計算
• content-box 背景圖片的偏移量從內(nèi)容區(qū)處計算
• border-box 背景圖片的變量從邊框處開始計算

background-size 設置背景圖片的大小

• 第一個值表示寬度
• 第二個值表示高度
  
  如果只寫一個痢法，則第二個值默認是 auto
• cover 圖片的比例不變狱窘，將元素鋪滿
• contain 圖片比例不變，將圖片在元素中完整顯示

background-attachment

• 背景圖片是否跟隨元素移動
• 可選值：
  • scroll 默認值 背景圖片會跟隨元素移動
  • fixed 背景會固定在頁面中财搁，不會隨元素移動

backgound 背景相關的簡寫屬性

• backgound 背景相關的簡寫屬性蘸炸，所有背景相關的樣式都可以通過該樣式來設置
• 并且該樣式?jīng)]有順序要求，也沒有哪個屬性是必須寫的
• 注意：
  • background-size必須寫在background-position的后邊尖奔，并且使用/隔開
    
    background-position/background-size
  • background-origin background-clip 兩個樣式 搭儒，orgin要在clip的前邊

漸變

漸變簡介

• 通過漸變可以設置一些復雜的背景顏色，可以實現(xiàn)從一個顏色向其他顏色過渡的效果
• 漸變是圖片提茁，需要通過background-image來設置

• 線性漸變

• 線性漸變淹禾，顏色沿著一條直線發(fā)生變化：linear-gradient()
  
  linear-gradient(red,yellow) 紅色在開頭，黃色在結(jié)尾茴扁，中間是過渡區(qū)域
• 線性漸變的開頭铃岔，我們可以指定一個漸變的方向
  • to left
  • to right
  • to bottom
  • to top
  • deg deg表示度數(shù)
  • turn 表示圈
• 漸變可以同時指定多個顏色，多個顏色默認情況下平均分布峭火，也可以手動指定漸變的分布情況

/*50px位置紅色是紅色毁习，100px位置是黃色，120px位置是綠色卖丸，200px位置是橙色纺且，其他區(qū)域是過渡色區(qū)*/
background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px)
/*紅色向右漸變?yōu)辄S色直到50px位置，50px向右都是黃色*/
background-image: repeating-linear-gradient(to right ,red, yellow 50px);

徑向漸變

• radial-gradient() 徑向漸變(放射性的效果)

• 默認情況下徑向漸變的形狀根據(jù)元素的形狀來計算的
  正方形 --> 圓形
  長方形 --> 橢圓形

• 我們也可以手動指定徑向漸變的大小

  • circle
  • ellipse

• 也可以指定漸變的位置
  
  語法：
  
  radial-gradient(大小 at 位置, 顏色 位置 ,顏色 位置 ,顏色 位置)

  • 大猩越：

    • circle 圓形
    • ellipse 橢圓
    • closest-side 近邊
    • closest-corner 近角
    • farthest-side 遠邊
    • farthest-corner 遠角

  • 位置：

    • top right left center bottom