1. 背景顏色

    1. background-color
    2. 默認值是transparent(透明)

2. 背景圖片

1. 語法

   background-image: none | url(url);(不加引號)
   

2. 可以定義多個背景圖片，多個背景圖片定義會發(fā)生圖片的重疊礁哄，

   background-image: url(/images/2.PNG),url("/images/4.jpg");
   

   但是可以通過backgound-的其他屬性進行設(shè)置

   background-image: url(/images/2.PNG),url("/images/4.jpg");
   background-repeat: no-repeat,no-repeat;// 第一個設(shè)置作用于第一個圖片
   background-position: top left,bottom right;
   

3. 背景裁切

設(shè)置元素的背景是否延申到邊框、內(nèi)邊距下面笆凌。background-clip

屬性值：

4. 背景重復(fù)

當背景圖片小于容器的時候臊旭，默認會產(chǎn)生多個圖片進行重復(fù)顯示

1. 語法

   background-repeat: no-repeat;
   

2. 參數(shù)說明

   屬性值	說明
   repeat	默認值，背景縱向和橫向上重復(fù)平鋪
   no-repeat	背景圖像不平鋪箩退，不重復(fù)
   repeat-x	背景圖像在橫向上平鋪
   repeat-y	背景圖像在縱向上平鋪
   space	背景圖片對稱均勻分布（重復(fù)均勻分布）离熏，相對于repeat不會顯得那么亂

3. 注：可以同時添加背景顏色和背景圖片，只不過背景顏色在背景圖片下方顯示

5. 背景圖片位置

該位置相對于由background-origin定義的位置圖層

background-origin規(guī)定了background-image屬性的原點位置的背景相對區(qū)域戴涝。

屬性值：

1. 語法

   background-position: x y;
   

2. 參數(shù)x 滋戳，y 可以使用方位名詞/精確單位

   1. 方位名詞 left| center | top | right | bottom
      1. 如果兩個值都是方位名詞，則兩個值前后順序無關(guān)
      2. 如果只指定了一個方位名詞啥刻，另一個值省略奸鸯，則第二個值默認居中對齊
   2. 參數(shù)是精確單位(px)
      1. 如果參數(shù)是精確坐標，那么第一個肯定是x坐標可帽，第二個一定是y坐標
      2. 如果只指定一個數(shù)值娄涩，那該數(shù)值一定是x坐標，另一個默認垂直居中
   3. 參數(shù)是相對單位(%映跟、em)
      1. 如果參數(shù)只有一個蓄拣，則為相對于x邊緣的值，另一個垂直居中
      2. 如果參數(shù)是兩個努隙，則一個相對于x邊緣的值球恤，另一個相對于y邊緣的值
      3. 但是值得注意的是：如果背景圖片的大小和容器一樣，那設(shè)置的百分比值將會失效荸镊，因為“容器和圖片的差”為0咽斧，圖片永遠填滿容器堪置，并且圖片的相對位置和容器的相對位置永遠重合。
   4. 參數(shù)是混合單位
      1. 如果指定的兩個值是精確單位和方位名詞混合使用张惹，則第一個值是x坐標晋柱，第二個值是y坐標

3. 可以設(shè)定多個position

6. 背景圖像固定（背景附著）

1. 語法

   background-attachment:scroll | fixed;
   

2. 設(shè)置背景圖像是否固定/隨著頁面的其余部分滾動，后期可以制作視差滾動效果诵叁，以及圖像水印效果

3. 參數(shù)

   1. scroll

      背景圖片隨對象內(nèi)容滾動

   2. fixed

      背景圖像固定

7. 背景尺寸

background-size為在元素原來比例尺寸的基礎(chǔ)上再對其顯示進行設(shè)置雁竞。

屬性值

采用數(shù)值px em %（重新設(shè)置圖片的寬高）

• 只指定一個值

  則另一個值默認為auto

• 指定兩個值

  一個值表示width拧额，另一個值表示為height

• 可以設(shè)置多個背景的尺寸

8. 背景復(fù)合寫法

• background-size只能緊挨著background-position出現(xiàn)碑诉，以/分隔，例如：center/80%

• <box>如果只出現(xiàn)一次侥锦，則同時設(shè)定background-origin和background-clip进栽，如果出現(xiàn)兩次，第一個設(shè)定background-orgin

• background-color只能在background的最后一個屬性上定義恭垦，因為整個元素只有一種背景顏色快毛。

• 其他屬性，則不講究順序

  background-attachment <box> background-color background-position background-size background-image background-repeat

9. 盒子陰影

通過box-shadow進行設(shè)置番挺，使用方式和text-shadow一樣

10. 圖像漸變

兩種漸變類型都是屬于gradient類型唠帝，是一種特別的image數(shù)據(jù)類型，因此兩種屬性只適用于image可使用的地方玄柏。

10.1 線性漸變 linear-gradient

線性漸變的顏色顯示規(guī)則是按照線性規(guī)則進行應(yīng)用襟衰，包括：顏色從上到下，從右到左粪摘，從左上到右下等瀑晒。

線性漸變是由一個軸，也即漸變線來定義的徘意。漸變線上的顏色通過自定義來產(chǎn)生苔悦，比如：linear-gradient(red,green)，此處由于沒有指定顏色起始位置椎咧，也即沒有指定red玖详、green從哪開始繪制到哪停止繪制，因此默認各占漸變線的一半平滑過渡邑退，那么真正要繪制的圖形容器顏色如何通過漸變線來繪制呢拙寡？linear-gradient會構(gòu)建一系列垂直于漸變線的著色線仍源，每一條著色線的顏色取決于與之垂直相交的漸變線上的顏色。而圖形容器則由這一系列的著色線組成柴底。

linear_gradient

語法：

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
              \--------------------------------/ \---------------------/
            Definition of the gradient line  List of color stops

angle：用角度值指定漸變的方向（或角度）秒拔。有角度表示漸變線可以旋轉(zhuǎn)莫矗，而漸變線旋轉(zhuǎn)的基點在背景容器的中線點上。順時針旋轉(zhuǎn)角度為正，逆時針旋轉(zhuǎn)角度為負作谚。

角度使用的單位為deg角度單位三娩，也即一個完整的圓是360deg

標準模式下的linear-gradient

標準模式下，旋轉(zhuǎn)的初始位置為相對于背景容器重合時妹懒，穿過背景容器的中心點從下到上的方向（180deg）雀监。也即默認位置如下：

linear_gradient-02

默認位置為180deg，xdeg則表示渲染的起始點從xdeg處開始

假設(shè)順時針旋轉(zhuǎn)45deg眨唬，也即linear-gradient(45deg,red,green);

此時渲染起始點為45deg處会前，也即左下方向渲染方向變成從左下到右上

linear_gradient-03.png

假設(shè)逆時針旋轉(zhuǎn)``45deg，也即linear-gradient(-45deg,red,green)`：

此時渲染起始點為-45deg處匾竿，也即右下方向瓦宜，渲染方向變成從右下到左上

linear_gradient_04.png

<side-or-corner>采用方位詞的方式表示旋轉(zhuǎn)角度

可選值有：top bottom left right

與to關(guān)鍵詞搭配使用，表示渲染方向到xx處岭妖，也即指明了渲染終點临庇，比如to top表示從bottom開始渲染，到top處結(jié)束昵慌。也即渲染方向為從下往上假夺。對應(yīng)角度為0deg

to left|to right | to top | to bottom 分別對應(yīng)于轉(zhuǎn)換角度360deg 90deg 0deg 180deg

也可以兩兩搭配，順序不講究

to left top : 從右下到左上

to right top: 從左下到右上

...等

<color-stop>顏色漸變斋攀。由至少兩個color值組成侄泽，且每個color值跟隨著一個可選的終點位置（可以是一個百分比值或者是沿著漸變軸的length）。css漸變的顏色渲染采取了與SVG相同的規(guī)則蜻韭。

一般情況下如果只是多個顏色的組合過渡悼尾，沒有指明每個顏色的渲染的終點位置，那么默認均分背景容器的位置肖方。

比如：linear-gradient(red,green)沒有指明red和green的到哪渲染結(jié)束闺魏，那么默認背景容器的1/3作為全部都是紅色渲染，1/3用于紅色到綠色的過渡渲染俯画，1/3用于全部都是綠色渲染析桥。

而以上方式則表現(xiàn)為平滑過渡，顯示的效果會略有點生硬艰垂。所以一般可自定義每個顏色渲染的終點位置泡仗。

例如：

linear-gradient(red 30%, green 50%,blue 100%);

linear-gradient-05.png

表示按照漸變線指定的方向渲染，從上往下猜憎。從容器背景的0%開始渲染到30%處表現(xiàn)為紅色（全紅）娩怎，其中紅色到綠色的過渡的部分各取了紅與綠渲染部分作為公共過渡部分，30%到50%處表現(xiàn)為綠色胰柑，50%到100%處表現(xiàn)為藍色截亦。其中0%以及最后一個顏色的100%可以省略爬泥，默認是到容器最后。

指明過渡的中間點崩瓤，

linear-gradient(90deg,red, 0%,green);

之前過渡點都是默認取值袍啡，什么是過渡點呢？也即一個顏色轉(zhuǎn)變到另一個顏色時的轉(zhuǎn)變點却桶。

以上代碼表示境输，從0%處開始過渡，0%以前是紅色位置颖系，0%-100%為綠色位置嗅剖，所以顯示為：

[圖片上傳失敗...(image-db1414-1618967718111)]

也可以采用length的方式指明，length是根據(jù)漸變線來指定的

linear-gradient(-45deg,red 0px,green 50px,yellow 150px,blue 200px);

liear-gradient-06.png

可以看到及時沒有red顏色值集晚，但是仍然存在過渡顏色窗悯。

注意：顏色終止列表中顏色的終止點應(yīng)該是依次遞增的。如果后面的顏色終止點小于前面顏色的終止點則后面的會被覆蓋偷拔，從而創(chuàng)建一個硬轉(zhuǎn)換蒋院。下面的變化是從紅色到黃色在40%的位置(也即沒有紅色到黃色的過渡)，然后過渡從黃色到藍色終止于65%的位置處莲绰。

background-image: linear-gradient(red 40%, yellow 30%, blue 65%);

漸變跨瀏覽器兼容模式

由于漸變是CSS3中的新規(guī)定欺旧，所以保不準那些有使用舊瀏覽器不兼容，為了兼容就得使用兼容前綴
其中有：

-moz-linear-gradient
-webkit-linear-gradient
-o-linear-gradient

-moz-前綴的規(guī)則用于兼容Fx 3.6 to Fx 15的火狐瀏覽器蛤签。 -webkit-前綴的規(guī)則用于兼容在Android 4.3以前版本辞友、iOS 6.1以前版本、Safari 6震肮。-o-前綴的規(guī)則用于兼容舊版本的opera瀏覽器称龙。

標準模式和兼容模式的區(qū)別：

• 0deg基線的位置不同，標準模式的是指向背景容器的正北方戳晌，兼容模式的是指向背景容器的正東方鲫尊。
• 關(guān)鍵字的使用方式不同，標準模式的需要加”to”關(guān)鍵字沦偎，兼容模式的不能加”to”（且top表示從上往下渲染）

10.2 重復(fù)線性漸變 repeating-linear-gradient

repeating-linear-gradient與linear-gradient語法一樣疫向，不同的是它在背景容器所設(shè)置的background-size大小范圍內(nèi)循環(huán)漸變，比如：

repeating-linear-gradient(-45deg,red 10px,blue 15px,yellow 20px);

表示循環(huán)生成red,blue,yellow顏色分布的漸變豪嚎，他們之間的距離會循環(huán)累加

相當于：

 linear-gradient(-45deg,red 10px,blue 15px,yellow 20px,red 30px,blue 35px,yellow 40px,...);

repeating-linear-gradient_01.png

如果設(shè)置了background-size值搔驼，那么repeating-linear-gradient循環(huán)的是范圍是在背景容器background-size所設(shè)置的大小范圍內(nèi)。如果沒有設(shè)置background-size值侈询，則循環(huán)的范圍是整個背景容器舌涨。

應(yīng)用：滾動條

div {
    width: 600px;
    height: 30px;
    margin: 200px auto;
    background: repeating-linear-gradient(90deg,red,15px,yellow 15px, 15px,green 25px);
}

以上采用了設(shè)置過渡點的形式使其顯示更生硬，red到y(tǒng)ellow過渡點為15px也即15px之前都是red妄荔，15px到y(tǒng)ellow最后可繪制的范圍15px為yellow泼菌，也即red到y(tǒng)ellow這兩個顏色的過渡把yellow遮蓋了谍肤，yellow到green過渡為15px啦租，也即15px之前繪制yellow哗伯，15px到25px繪制blue，同樣yellow沒有可繪制的篷角，因此15px-25px全為green焊刹，使其顯得就如red到green之間不存在過渡，直接是兩個顏色拼接一樣恳蹲。

linear-gradinent-07.png

10.3 徑向漸變 radial-gradient

和線性漸變一樣虐块，徑向漸變也有自己的漸變線叫做漸變射線，原理差不多,都是先找一個渲染起始點開始渲染嘉蕾，然后到渲染結(jié)束點贺奠。而徑向漸變渲染起始點在背景圖像的中心位置處。

• 設(shè)置漸變

background: radial-gradient(red, blue, green);

• 設(shè)置漸變寬度與高度

  background: radial-gradient(100px 200px, red, blue, green);
  

• 左下漸變

  background: radial-gradient(at bottom left, red, blue);
  

• 左側(cè)向中心漸變

  background: radial-gradient(at center left, red, blue);
  

• 底部向中心漸變

  background: radial-gradient(at 50% 100%, red, blue);
  

  其中50% 與 100%是相對于漸變射線而言的

radial-gradient——02.png

10.4 重復(fù)徑向漸變 repeating-radial-gradient

與重復(fù)線性漸變一樣错忱。用法類似儡率。