CSS - background

background 是一種 CSS 簡寫屬性，用於一次性集中定義一個或多個背景屬性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size 和 background-attachment。
對於全部簡寫屬性，任何沒有被指定的值都會被設定爲它們的初始值。

語法

background 能夠設置一個或多個背景層，多個背景層使用逗號分隔。

每一層的語法以下：

1. 在每一層中，下列的值能夠出現 0 次或 1 次， 能夠按任意順序放置：
   background-attachment
background-image
background-position
background-size
background-repeat
2. background-size 只能緊接着 background-position 出現，以"/"分割，如： "center/80%"；
3. background-clip 和 background-origin 可能出現 0 次、1 次或 2 次。若是出現 1 次，它同時設定 background-origin 和 background-clip。若是出現 2 次，第一次的出現設置 background-origin，第二次的出現設置 background-clip。
4. background-color 只能在background的最後一個屬性上定義，由於整個元素只有一種背景顏色。

幾個關鍵字

inherit

inherit 關鍵字使元素得到父元素的計算值。它可應用於任何 CSS 屬性，包括 CSS 簡寫 all。 繼承始終來自文檔樹中的父元素，即便父元素不是包含塊。

• 對於繼承屬性，inherit 只是加強了屬性的默認行爲，只有在重載(overload)其它規則的時候被使用。
• 對於非繼承屬性，inherit 指定的行爲一般沒有多大意義，通常使用使用 initial 或 unset 做爲替代。

initial

initial 關鍵字將屬性的初始或默認值應用於元素，將屬性恢復到其初始狀態。它可應用於任何CSS屬性，包括 CSS 簡寫 all 。不該將初始值與瀏覽器樣式表指定的值混淆。

• 對於繼承屬性，initial 關鍵字是不起做用的。應該考慮使用 inherit, unset，或revert (en-US) 關鍵字代替。

unset

unset 關鍵字能夠應用於任何 CSS 屬性，包括 CSS 簡寫屬性 all 。

• 對於繼承屬性，unset 關鍵字的行爲相似於 inherit，將該屬性從新設置爲繼承的值。
• 對於非繼承屬性，unset 關鍵字的行爲相似於 initial，將該屬性從新設置爲初始值。

transparent

transparent 用來指定全透明色彩, 相似於 rgba(0, 0, 0, 0) 這樣的值。
在CSS1中，transparent 被用來做爲 background-color 的一個參數值，表示背景透明。
在CSS2中，border-color 和 color 開始支持 transparent 做爲參數值。
在CSS3中，transparent 被延伸到任何一個有 color 值的屬性上均可以使用。

屬性

background-attachment

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

/* 關鍵 屬性值 */
background-attachment: scroll; /* 初始值 */
background-attachment: fixed;
background-attachment: local;

/* 全局 屬性值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

fixed
表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

local
表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 而且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含它的邊框。

scroll
表示背景相對於元素自己固定， 而不是隨着它的內容滾動（對元素邊框是有效的）。

background-clip

background-clip 定義了背景圖像的區域，是否延伸到邊框、內邊距盒子、內容盒子。

若是沒有設置背景圖片（background-image）或背景顏色（background-color），那麼這個屬性只有在邊框（ border）被設置爲非固實（soild）、透明或半透明時才能看到視覺效果（與 border-style 或 border-image 有關），不然，本屬性產生的樣式變化會被邊框覆蓋。

/* 關鍵 屬性值 */
background-clip: border-box; /* 初始值 */
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* 全局 屬性值 */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

border-box
背景延伸至邊框（border）外沿（可是在邊框下層）。

padding-box
背景延伸至內邊距（padding）外沿。不會繪製到邊框處。

content-box
背景被裁剪至內容區（content box）外沿。

text
背景被裁剪成文字的前景色。

background-origin

background-origin 定義背景圖像的背景位置（background-position）的起始點。

當使用 background-attachment 爲 fixed 時，該屬性將被忽略不起做用。

/* 關鍵 屬性值 */
background-origin: border-box;
background-origin: padding-box; /* 初始值 */
background-origin: content-box;

/* 全局 屬性值 */
background-origin: inherit;

border-box
背景圖片的擺放以border區域爲參考

padding-box
背景圖片的擺放以padding區域爲參考

content-box
背景圖片的擺放以content區域爲參考

background-color

background-color 會設置元素的背景色。

/* 關鍵 屬性值 */
background-color: red;

/* Hexadecimal 屬性值 */
background-color: #000;

/* RGB 屬性值 */
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.1);

/* HSLA 屬性值 */
background-color: hsla(50, 33%, 25%, 0.75);

/* 特殊 關鍵 屬性值 */
background-color: currentColor;
background-color: transparent; /* 初始值 */

/* 全局 屬性值 */
background-color: inherit;
background-color: initial;
background-color: unset;

currentColor
設置當前字體顏色爲背景色；

transparent
設置透明背景色。

background-image

background-image 屬性用於爲一個元素設置一個或者多個背景圖。多背景之間以逗號隔開。
在繪製時，圖像以 z 方向堆疊的方式進行。先設置的圖會在以後指定的圖上面繪製, 所以設置的第一個圖「最接近用戶」。而後元素的邊框 border 會在背景圖之上被繪製，而 background-color 會在背景圖之下繪製。

/**
 * url()
 */
background-image: url('http://xxxx/xxx.png');

/**
 * 漸變
 */
background-image: linear-gradient(to right, red, orange, yellow, green);

/**
 * element(): colonne3 是存在於頁面中的一個元素id
 */
background-image: element(#colonne3);

background-image: none;

none
表示無背景圖。

url()
背景圖是一個圖片，經過 url() 方法引入圖片。

linear-gradient
背景圖是一個過渡漸變，經過 linear-gradient 設置兩種或多種顏色的過渡漸變;

element()
背景圖是頁面中的一部分，經過 element() 方法引入頁面的一部分；

background-position

background-position 爲每個背景圖片設置初始位置。 這個位置是相對於由 background-origin 定義的位置圖層的。

/* 關鍵 屬性值 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* 百分比 值 */
background-position: 25% 75%;

/* 長度 值 */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* 多個圖片，逗號隔開 */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: bottom 10px right;

/* 全局 屬性值 */
background-position: inherit;
background-position: initial;
background-position: unset;

• 關鍵字 center，居中背景圖片。
• 關鍵字 top, left, bottom, right，用來指定背景圖放在哪個邊緣的中間位置（另外一個維度被設置成 50%）。
• <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）。

background-repeat

background-repeat 屬性定義背景圖像的重複方式。背景圖像能夠沿着水平軸，垂直軸，兩個軸重複，或者不重複。默認狀況下，重複的圖像被剪裁爲元素的大小，但它們能夠縮放 (使用 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
圖像會按需重複來覆蓋整個背景圖片所在的區域。若是大小不合適，圖像會被裁剪。

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

round
隨着容許的空間在尺寸上的增加，被重複的圖像將會伸展(沒有空隙)，直到有足夠的空間來添加一個圖像。當下一個圖像被添加後, 全部的當前的圖像會被壓縮來騰出空間。

no-repeat
圖像不會重複。背景圖像的位置是由 background-position 決定。

background-size

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

沒有被背景圖片覆蓋的背景區域會顯示用 background-color 屬性設置的背景顏色。若是背景圖片設置了透明或者半透明屬性，後面的背景色也會顯示出來。

/* 關鍵字 */
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: auto 6px;

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

/* 全局屬性 */
background-size: inherit;
background-size: initial;
background-size: unset;

cover
縮放背景圖片以徹底覆蓋背景區，可能背景圖片部分看不見。和 contain 值相反，cover 值儘量大的縮放背景圖像並保持圖像的寬高比例（圖像不會被壓扁）。該背景圖以它的所有寬或者高覆蓋所在容器。當容器和背景圖大小不一樣時，背景圖的 左/右 或者 上/下 部分會被裁剪。

contain
縮放背景圖片以徹底裝入背景區，可能背景區部分空白。contain 儘量的縮放背景並保持圖像的寬高比例（圖像不會被壓縮）。該背景圖會填充所在的容器。當背景圖和容器的大小的不一樣時，容器的空白區域（上/下或者左/右）會顯示由 background-color 設置的背景顏色。

auto以背景圖片的比例縮放背景圖片。