css background詳解

background 是一種 CSS 簡寫屬性，用於一次性集中定義各類背景屬性，包括 color, image, origin 與 size, repeat 方式等等。

標準語法

[ <bg-layer> , ]* <final-bg-layer>
where 
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

where 
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-box

where 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

where 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>

where 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

where 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>
複製代碼

background(簡寫形式)

語法：
background: <bg-layer>, <bg-layer>,....; #background: 最上一層，....， 最下一層

# background: color image position / size repeat-style attachment box box; // color >> final-layer
# background: url() left(x) bottom(y) / 20%(width) 50%(height) no-repeat local border-box border-box, 
background:  
url() left bottom / 20% 50% no-repeat local border-box border-box,  
url() 10% 30% / 50% 50% no-repeat local content-box border-box,  
  ...
green  url() left 50% / 50% 50%  no-repeat  local border-box border-box; 


#background demo
   .base{
      width: 200px;
      font-size: 12px;
      height: 200px;
      border: 2px solid #fff;
      float: left;
      margin-right: 10px;
      margin-top: 10px; 
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
    }
.demo{
  background:  
        url(https://upload-images.jianshu.io/upload_images/12041061-95393ded037c7fb5.jpg) left 15%/20% 40% no-repeat local border-box content-box, /*6 最上層圖(眼珠)*/
        url(https://upload-images.jianshu.io/upload_images/12041061-f40c4e55bcdd1e86.png) right center / 100% auto no-repeat local content-box content-box, /*5  中間圖(圖標列表) 設置content-box 被裁剪*/
        url(https://upload-images.jianshu.io/upload_images/12041061-f40c4e55bcdd1e86.png) right top / 100% auto no-repeat local border-box border-box, /*4  中間圖(圖標列表)*/
        url(https://upload-images.jianshu.io/upload_images/12041061-f40c4e55bcdd1e86.png) right bottom / 100% auto no-repeat local border-box content-box, /*3  中間圖(圖標列表) 被裁剪*/
        url(https://upload-images.jianshu.io/upload_images/12041061-1b34cb94b686e162.png) 80% 20%/ 30% auto no-repeat local border-box border-box, /* 2 中間圖(蜥蜴)*/
        radial-gradient(green, skyblue); /* 1 最底層*/
}
<div class="base demo"></div>
複製代碼

背景層(最底層能夠設置背景顏色)

<bg-layer>:<bg-color> <bg-image> <bg-position> <bg-size> <repeat-style> <attachment> <box> <box>; # <bg-color> 僅適用於最底層

#<bg-layer> = background-color background-image background-position 
background-size background-attachment background-origin background-clip
# url() left(x) bottom(y) / 20%(width) 50%(height) no-repeat local border-box border-box, 
#<bg-layer> 背景色 背景圖 背景位置 背景尺寸 背景懸浮方式 背景附加內容框 背景邊框

複製代碼

background-attachment CSS 屬性決定背景圖像的位置是在視口內固定，仍是隨着包含它的區塊滾動。

fixed
此關鍵字表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。
local
此關鍵字表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 而且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。
scroll
此關鍵字表示背景相對於元素自己固定， 而不是隨着它的內容滾動（對元素邊框是有效的）。
複製代碼

background-clip 設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。

若是沒有設置背景圖片（background-image）或背景顏色（background-color），那麼這個屬性只有在邊框（ border）被設置爲非固實（soild）、透明或半透明時才能看到視覺效果（與 border-style 或 border-image 有關），不然，本屬性產生的樣式變化會被邊框覆蓋。
border-box
背景延伸至邊框外沿（可是在邊框下層）。
padding-box
背景延伸至內邊距（padding）外沿。不會繪製到邊框處。
content-box
背景被裁剪至內容區（content box）外沿。
text 
背景被裁剪成文字的前景色。
複製代碼

background-origin 規定了指定背景圖片background-image 屬性的原點位置的背景相對區域.注意：當使用 background-attachment 爲fixed時，該屬性將被忽略不起做用。

border-box
背景圖片的擺放以border區域爲參考
padding-box
背景圖片的擺放以padding區域爲參考
content-box
背景圖片的擺放以content區域爲參考
複製代碼

background-position 爲每個背景圖片設置初始位置。 這個位置是相對於由 background-origin 定義的位置圖層的。background-position 屬性被指定爲一個或多個 <position> 值，用逗號隔開

background-position: left;
background-position: center;
background-position: 25% 75%;
background-position: bottom 50px right 100px;

複製代碼

關鍵字 center，用來居中背景圖片。
關鍵字 top, left, bottom, right 中的一個。用來指定把這個項目（原文爲 item）放在哪個邊緣。另外一個維度被設置成 50%，因此這個項目（原文爲 item）被放在指定邊緣的中間位置。
<length> 或 <percentage>。指定相對於左邊緣的 x 座標，y 座標被設置成 50%。
若是一個值是  top 或  bottom，那麼另外一個值不該該是 top 或 bottom。
若是一個值是  left 或   right，那麼另外一個值不該該是 left 或 right 。
+50px（將圖片的左邊界對齊容器的中線）
0px（圖片的左邊界與容器左邊界重合）
-100px（將圖片相對容器左移100px，這意味着圖片中部的100px內容將出如今容器中）
-200px（將圖片相對容器左移200px，這意味着圖片右部分的100px內容將出如今容器中）
-250px（將圖片相對容器左移250px，這意味着圖片的右邊界對齊容器的中線）
    另外須要注意，若是背景圖片的大小和容器同樣，那設置百分比的值將永遠無效，由於「容器和圖片的差」爲0（圖片永遠填滿容器，而且圖片的相對位置和容器的相對位置永遠重合）。在這種狀況下，須要爲偏移使用絕對值（例如px）。

<position>
  一個 <position> 定義一組 x/y 座標（相對於一個元素盒子模型的邊緣），來放置這個項目（原文爲 item）。它能夠被定義爲一個值或者兩個值。若是被定義爲兩個值，那麼第一個值表明水平位置，第二個表明垂直垂直位置。若是隻指定一個值，那麼第二個值默認爲 center。
一個值的語法: 這個值能夠是：

兩個值的語法: 一個定義 x 座標，另外一個定義 y 座標。每一個值能夠是：

關鍵字 top, left, bottom, right 中的一個。 若是這裏給出 left 或 right，那麼這個值定義 x 軸位置，另外一個值定義 y 軸位置。若是這裏給出 top 或  bottom，那麼這個值定義 y 軸位置，另外一個值定義 x 軸位置。
<length> 或 <percentage>。若是另外一個值是  left 或  right，那麼這個值（指 <length> 或 <percentage>）定義相對於上邊緣的 y 軸位置。 若是兩個值都是 <length> 或 <percentage>，那麼第一個值定義 x 軸位置，第二個定義 y 軸位置。
注意：

也就是說，top top 和 left left 是無效的。

至於百分比：

百分比值的偏移指定圖片的相對位置和容器的相對位置重合。值0%表明圖片的左邊界（或上邊界）和容器的左邊界（上邊界）重合。值100%表明圖片的右邊界（或下邊界）和容器的右邊界（或下邊界）重合。值50%則表明圖片的中點和容器的中點重合。

當指定百分比值的時候，實際上執行了如下的計算公式（該公式能夠用數學方式定義圖片和容器相對位置重合）：

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

使用X座標來舉個例子，假設有一個300px寬的圖片，將這個圖片使用到一個100px寬的容器中，而且將background-size設置成自動：

100px - 300px = -200px (容器和圖片的寬度差)

當對background-position設置值依次爲-25%，0%，50%，100%，125%，獲得圖片相對容器的偏移值爲：

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

對於這些例子中設置的偏移，圖片相對容器真實的偏移值就是：
複製代碼

background-position-x CSS 屬性設置水平方向的位置，與每一個背景圖片等位置層設置屬性 background-origin相關。更多信息請查看background-position屬性，這個用的比較廣泛。

background-position-y 屬性用於設置初始狀態時背景圖片在垂直方向上的位置,這個位置相對於經過 background-origin 定義的背景層的原點進行定位. 須要得到更多的信息能夠查看background-position 屬性,這個屬性已經獲得了長久且普遍的支持.

background-repeat CSS 屬性定義背景圖像的重複方式。背景圖像能夠沿着水平軸，垂直軸，兩個軸重複，或者根本不重複。默認狀況下，重複的圖像被剪裁爲元素的大小，但它們能夠縮放 (使用 round) 或者均勻地分佈 (使用 space).

/* 單值語法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 雙值語法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;
複製代碼

單值語法是完整的雙值語法的簡寫:

單值	等價於雙值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat 在雙值語法中, 第一個值表示水平重複行爲, 第二個值表示垂直重複行爲. 下面是關於每個值是怎麼工做的具體說明

repeat	
圖像會按需重複來覆蓋整個背景圖片所在的區域. 最後一個圖像會被裁剪, 若是它的大小不合適的話.

space	
圖像會盡量得重複, 可是不會裁剪. 第一個和最後一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在圖像之間. background-position屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種狀況下裁剪會發生, 那就是圖像太大了以致於沒有足夠的空間來完整顯示一個圖像.

round	
隨着容許的空間在尺寸上的增加, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加後, 全部的當前的圖像會被壓縮來騰出空間. 例如, 一個圖像原始大小是260px, 重複三次以後, 可能會被伸展到300px, 直到另外一個圖像被加進來. 這樣他們就可能被壓縮到225px.

譯者注: 關鍵是瀏覽器怎麼計算何時應該添加一個圖像進來, 而不是繼續伸展.

no-repeat	
圖像不會被重複(由於背景圖像所在的區域將可能沒有徹底被覆蓋). 那個沒有被重複的背景圖像的位置是由background-position屬性來決定.
複製代碼

background-size 設置背景圖片大小。圖片能夠保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

/* 關鍵字 */
background-size: cover
background-size: contain

/* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的爲auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 兩個值 */
/* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗號分隔的多個值：設置多重背景 */
background-size: auto, auto     /* 不一樣於background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局屬性 */
background-size: inherit;
background-size: initial;
background-size: unset;
複製代碼

<length>
<length> 值，指定背景圖片大小，不能爲負值。
<percentage>
<percentage> 值，指定背景圖片相對背景區（background positioning area）的百分比。背景區由background-origin設置，默認爲盒模型的內容區與內邊距，也可設置爲只有內容區，或者還包括邊框。若是attachment 爲fixed，背景區爲瀏覽器可視區（即視口），不包括滾動條。不能爲負值。
auto
以背景圖片的比例縮放背景圖片。
cover
縮放背景圖片以徹底覆蓋背景區，可能背景圖片部分看不見。和 contain 值相反，cover 值儘量大的縮放背景圖像並保持圖像的寬高比例（圖像不會被壓扁）。該背景圖以它的所有寬或者高覆蓋所在容器。當容器和背景圖大小不一樣時，背景圖的 左/右 或者 上/下 部分會被裁剪。
contain
縮放背景圖片以徹底裝入背景區，可能背景區部分空白。contain 儘量的縮放背景並保持圖像的寬高比例（圖像不會被壓縮）。該背景圖會填充所在的容器。當背景圖和容器的大小的不一樣時，容器的空白區域（上/下或者左/右）會顯示由 background-color 設置的背景顏色。
位圖必定有固有尺寸與固有比例，矢量圖可能二者都有，也可能只有一個。漸變視爲只有固有尺寸或者只有固有比例的圖片。

若是指定了 background-size 的兩個值而且不是auto：
背景圖片按指定大小渲染。
contain 或 cover:
保留固有比例，最大的包含或覆蓋背景區。若是圖像沒有固有比例，則按背景區大小。
auto 或 auto auto:
圖像若是有兩個長度，則按這個尺寸。若是沒有固有尺寸與固有比例，則按背景區的大小。若是沒有固有尺寸可是有固有比例， 效果同 contain。若是有一個長度與比例，則由此長度與比例計算大小。若是有一個長度可是沒有比例，則使用此長度與背景區相應的長度。
一個爲 auto 另外一個不是auto:
若是圖像有固有比例，則指定的長度使用指定值，未指定的長度由指定值與固有比例計算。若是圖像沒有固有比例，則指定的長度使用指定值，未指定的長度使用圖像相應的固有長度，若沒有固有長度，則使用背景區相應的長度。
注意，對於沒有固有尺寸或固有比例的矢量圖不是全部的瀏覽器都支持。特別注意測試Firefox 7- 與Firefox 8+，以肯定不一樣之處可否接受。
複製代碼