CSS保健室｜background

前言

background 是網頁設計一定會使用到的基礎 CSS ，雖然使用率這麼高，可是真的熟悉嗎？這篇是 CSS 學習筆記的開端，當初因為讀書會要報告 background ，而開始有了整理這系列文章的念頭，先有個心理準備，這次篇幅真的又臭又長，但看完會對這屬性有全面的了解，開始！

（ 圖片來源 ）

background 有很多屬性，接著一一來介紹

background

background 簡寫屬性在一個聲明中設置所有的背景屬性，但是未指明的值會被設為預設值而覆寫先前的設定值，這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。

div {
    background: yellow;
    background: url(images/bg.png) no-repeat top right;
}

如上圖 div 並不會將背景設為黃色，而是使用 background-color 的預設值 transparent ，以後面的規則為優先。

可以設置如下屬性：

• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

藉由 CSS3 我們可以對元素使用多重背景。每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層。記得只有最後一個背景可以設定 background-color 。

div {
  background: 
    background 1, //第一層
    background 2, //第二層
    ...,
    background n; //最後一層
}

可以使用縮寫的方式 background 和個別標記的方式設定多重背景，但是部分屬性無法設置多重背景，例如 background-color 。

下面是能設置為多重背景的背景屬性：

• background
• background-attachment
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size

background-attachment

網頁設計忍者報到，說到 background-attachment 就不能不提到鹿丸，看要牽制對方行動或用影子強迫對方做與施術者相同的動作，這可是奈良一族獨創的忍術耶，我們趕快去找他請教一下吧！

（ 圖片來源 ）

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動。

background-image 通常要寫在前面，接著才能寫 background-attachment ，否則在部分的瀏覽器會無法判斷。

值	描述
scroll （ 影子束縛術 ）	默認值。 網頁背景圖片會跟著頁面捲軸移動。 網頁背景圖片不會跟著元素捲軸移動（ 如果有 overflow: scroll ）。 （ 圖片來源 ）
fixed （ 影摑之術 ）	網頁背景圖片不會跟著頁面捲軸移動（ 視差滾動 ）。 網頁背景圖片不會跟著元素捲軸移動（ 如果有 overflow: scroll ）。 （ 圖片來源 ）
local （ 束影術 ）	網頁背景圖片會跟著頁面捲軸移動。 網頁背景圖片會跟著元素捲軸移動（ 如果有 overflow: scroll ）。 （ 圖片來源 ）

利用 local + scroll 做出的固定陰影效果

在這效果下，我們可以做出向上或是向下未讀完錯覺，利用了兩種模式的交叉運用，做出的視覺效果。
在文章最頂部沒有上陰影，中間上下會有陰影，最底部沒有下陰影。

.localxScroll{
  background:
    linear-gradient(white 30%, hsla(0,0%,100%,0)),
    linear-gradient(hsla(0,0%,100%,0), white 70%) bottom,
    radial-gradient(at top, rgba(0,0,0,.5), transparent 70%),
    radial-gradient(at bottom, rgba(0,0,0,.5), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

利用 scroll 做出的固定陰影效果

上下都有著固定的陰影，在哪邊都不會移動，就算到了最上層及最底層也不會有變化。

.attachmentxScroll{
  background:
    radial-gradient(at top, rgba(0, 0, 0, 0.5), transparent 70%),
    radial-gradient(at bottom, rgba(0, 0, 0, 0.5), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 18px, 100% 18px;
  background-attachment: scroll, scroll;
}

利用 local 做出的固定陰影效果

上下都有著固定的陰影，但只有各自移動到最上層及最底層才會出現。

.attachmentxLocal{
  background:
    radial-gradient(at top, rgba(0, 0, 0, 0.5), transparent 70%),
    radial-gradient(at bottom, rgba(0, 0, 0, 0.5), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px;
  background-attachment: local, local;
}

background-blend-mode

CSS 也可以運用多種混合模式呈現不同視覺效果，可以把 background-blend-mode 想像成是一台蔬果榨汁機，你加入的食材會決定果汁最後的顏色，開關打開了，你快一起過來看看！

（ 圖片來源 ）

目前 IE 瀏覽器不支持 background-blend-mode 屬性。

background-blend-mode 這一個 CSS 屬性是針對 背景圖片 的混合模式，所以並不會影響畫面中其他物件色彩，可以是背景圖片與背景圖片的混合，也可以是背景圖片和背景色的之間的混合。
background-blend-mode 是應用在單個元素的背景之間（ background 裡面 ）， 它還支持多背景混合，可以把 background 想像是一台果汁機，只會攪和機器內的食物，不會被外面的一切干擾到，而 mix-blend-mode 則是應用於多個元素，除背景外，元素內的文字等其他內容也會被混合。

（ 圖片來源 ）

上圖是 PS 中的混合模式，數量比 CSS 中的多出幾個，但 CSS 已經能夠在各種不同的模式中演算出多達 16 種效果，如上圖粉紅色的字。

background-blend-mode 及 mix-blend-mode 這兩種混合模式的值是相同的。

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, no-repeat;
  background-image: url("fish.png"), url("wood.png");
  background-position: center;
  background-blend-mode: 
      normal | multiply | screen | overlay | 
      darken | lighten | color-dodge | color-burn | 
      hard-light | soft-light | difference | exclusion | 
      hue | saturation | color | luminosity;
}

下面有 木紋 和 魚 兩張圖的混合模式範例：

值	描述	範例
normal （ 一般 ）	為屬性預設的值，沒有被混合只選擇上層圖層的顏色。
multiply （ 色彩增值 ）	將背景以及來源色彩（ 上層圖片 ）的顏色相乘，並替換掉原本的顏色，結果色會比來源色或目標色暗。 將任何色與黑色相乘結果為黑色，將任何色與白色相乘則維持原來的顏色。
screen （ 濾色 ）	將背景以及來源色的補值相乘，得到補色相乘的結果，結果色會比背景或來源色還要亮。 將任何色過濾白色得到白色；將來源色過濾黑色則結果不變。 效果近似於將好幾個投影片投影在單一個投影幕上。
overlay （ 覆蓋 ）	相乘或過濾顏色，取決於背景的顏色值。 當來源色過濾背景時保留原本的強光以及陰影，背景顏色並非被取代，而是與來源色混合展現背景的亮部或暗部。
darken （ 變暗 ）	保留背景以及來源色彩中較暗的色彩。 背景會與來源色彩中較暗的顏色混合。
lighten （ 變亮 ）	保留背景以及來源色彩中較亮的顏色。 背景會與來源色彩中較亮的顏色混合。
color-dodge （ 加亮顏色－減淡 ）	將背景加亮來展現來源色。 如果背景為黑色則不會有任何改變。
color-burn （ 加深顏色 ）	減低背景色亮度反映出來源色。 如果背景為白色則不會有任何改變。
hard-light （ 實光 ）	將顏色相乘或過濾，取決於來源色的顏色值。 效果近似於強烈的聚光燈照在背景圖片上。
soft-light （ 柔光 ）	將顏色加深或加亮，取決於來源色的顏色值。 效果近似於漫射的聚光燈照在背景圖片上。
difference （ 差異化 ）	用亮色減去兩個來源色中的深色。 如果背景為白色則為反轉色，背景為黑色則不會有任何改變。
exclusion （ 排除 ）	效果近似於差異化但對比度較低。
hue （ 色相 ）	用來源色的色相創造出另一個顏色，結合背景原來的飽和度及亮度。
saturation （ 飽和度 ）	用來源色的飽和度創造出另一個顏色，結合背景原來的飽和度及亮度。 如果背景為灰階（ 無飽和度 ）的狀態下則不會有任何效果。
color （ 顏色 ）	用來源色的色相以及飽和度創造出另一個顏色，結合背景原來的亮度。 保留了背景的灰階，且對於單色圖像的色彩化或是圖像的著色很有幫助。
luminosity （ 明度 ）	用來源色的明度創造出另一個顏色，結合背景原來的色相及飽和度。 這與顏色模式的效果正好相反。

（ 圖片來源：木頭、魚 ）

background-color

background-color 屬性設置元素的背景顏色。

• Hexadecimal colors
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined / Cross-browser color names

RGBA（ RED 值, GREEN 值, BLUE 值, ALPHA 值 ）

• red , green , blue 值
  可以是 0 ~ 255 的整數值，也可以是 0% ~ 100% 的百分比值。
• alpha 值（ alphavalue ）
  0.0 ~ 1.0 允許小數一位的數值， 0 → 完全透明， 1 → 完全不透明。

HSLA（ HUE 值, SATURATION 值, LIGHTNESS 值, ALPHA 值 ）

• hue 值（ 色相值 ）
  以整數「角度」值表示，但是不加「°」角度符號。
  0 或 360 → 紅色，
  60 → 黃色，
  120 → 綠色，
  240 → 藍色，
  就好像彩虹色繞成一個圓，如同數學角度，負值或超過 360 是允許的。
• saturation 值（ 飽和度值 ）
  0% ~ 100% 的百分比值，
  0% → 灰色調，100% → 最大飽和度，
  所以 0% 時，不論 hue 值是多少，都會以灰階單色呈現。
• ightness 值（ 亮度值 ）
  0% ~ 100% 的百分比值，
  0% → 最暗（ 暗黑 ），100% → 最亮（ 亮白 ），50% → 正常亮度。
  50% 以上漸漸增加白色， 50% 以下漸漸增加黑色。
• alpha 值（ alphavalue ）
  0.0 ~ 1.0 允許小數一位的數值。

background-image

寫輪眼 background-image 可以改變眼球背景，現在不侷限於血繼限界，如果你想要也可以學習，但接下來落落長的捲軸你沒有好好研究，可是悟不出箇中道理啊，加油！

（ 圖片來源 ）

background-image 屬性為元素設置背景圖像。元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距，背景圖像位於元素的左上角，並在水平和垂直方向上重複。

想藉助一些工具來做漸層，可以參考使用 Ultimate CSS Gradient Generator ！

linear-gradient（ 線性漸變 ）

Safari 和 Chrome 支持替代的 -webkit-linear-gradient（ 另可再加上 -webkit-gradient 支援早期的版本）屬性， Firefox 支持替代的 -moz-linear-gradient 屬性， Opera 支持替代的 -o-linear-gradient 屬性。

div {
  background-image: -webkit-linear-gradient(0deg, #000000 0%, #ffffff 100%);
  background-image: -webkit-gradient(0deg, #000000 0%, #ffffff 100%);
  background-image: -moz-linear-gradient(0deg, #000000 0%, #ffffff 100%);
  background-image: -o-linear-gradient(0deg, #000000 0%, #ffffff 100%);
  background-image: linear-gradient(0deg, #000000 0%, #ffffff 100%);
}

由於是 image ，所以用於 background 時，實際是設置在 background-image 上，如果只是單純的漸變顏色，可以用以下的樣式來對不支持的老舊瀏覽器做降級處理。

div {
  background-color: red;
  background-image: linear-gradient(red, orange);
}

linear-gradient( [ < angle > | to < side-or-corner > ] , [ < color-stop > ] )

< angle >：用角度值指定漸變的方向（ 或角度 ）。

< side-or-corner >：
to left －從右到左。相當於: 270deg 。
to right －從左到右。相當於: 90deg 。
to top －從下到上。相當於: 0deg 。
to bottom －從上到下。相當於: 180deg 。這是默認值，等同於留空不寫。

< color-stop > = < color > [ < length > | < percentage > ]

多重背景

（ 圖片來源 ）

藉由 CSS3 我們可以對元素使用多重背景，每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層，要記得只有最後一個背景可以設定 background-color 。下面示意重疊三個背景：鮟鱇魚、鯨魚和線性漸層的圖片。

.multi_bg_example {
  background-image: url(right.png),
                    url(left.png),
                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
                     no-repeat,
                     no-repeat;
  background-position: bottom right,
                       bottom left;
}

分層漸層

background: linear-gradient(#fb3 40%, #58a 60%);

0% - 40% 是 #fb3（ 橘色 ），
40% - 60% 是 #fb3（ 橘色 ）與 #58a（ 藍色 ）的漸層，
60% - 100% 是 #58a（ 藍色 ）。

實色漸層

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px; /*background-repeat 默認值repeat 所以會重複*/

如果我們把第二個色標的位置值設置為 0 「 linear-gradient(#fb3 50%, #58a 0); 」，那它的位置就總是會被瀏覽器調整為前一個色標的位置值，如果要創建超過兩種顏色的條紋，可以使用逗號分隔開來。

垂直漸層

background: linear-gradient(to right /* 或 90deg */, #fb3 50%,#58a 0);
background-size: 30px 100%;

斜線漸層

單個貼片包含四條條紋，只有這樣才能做到無縫拼接。（ 也可以參考 repeating-linear-gradient 的範例 ）

background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

桌巾透明網格

background: white;
background-image: 
   linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
   linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

棋盤格紋

background: #eee;
background-image: 
   linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%, rgba(0,0,0,.25) 0),
   linear-gradient(45deg,rgba(0,0,0,.25) 25%, transparent 0,transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

radial-gradient（ 徑向漸變 ）

Safari 和 Chrome 支持替代的 -webkit-radial-gradient 屬性， Firefox 支持替代的 -moz-radial-gradient 屬性， Opera 支持替代的 -o-radial-gradient 屬性。

div {
    background-image: -webkit-radial-gradient(circle, red, yellow, green);
    background-image: -moz-radial-gradient(circle, red, yellow, green);
    background-image: -o-radial-gradient(circle, red, yellow, green);
    background-image: radial-gradient(circle, red, yellow, green);
}

radial-gradient( < size > + < shape > + at < position > , [ < color-stop > ] )

< size >：可以是具體的值，也可以用關鍵字指定，默認值是 farthest-corner 。如果是具體值，圓形需要一個數值，橢圓需要兩個。關鍵字則包括：

• closest-side 指漸變中心距離容器最近的邊作為終止位置。
• farthest-side 指漸變中心距離容器最遠的邊作為終止位置。
• closest-corner 指漸變中心距離容器最近的角作為終止位置。
• farthest-corner 指漸變中心距離容器最遠的角作為終止位置。

< shape >： ending-shape 可以是 circle （ 圓形 ）或者 elipse （ 橢圓 ），如果省略，則默認值與 size 相關， size 指定一個值就是圓形，否則是橢圓。

< position >：用來指定漸變圓心的位置，默認為 center ，規則同 background-positon ，前面要加個 at 。

< color-stop > = < color > [ < length > | < percentage > ]

對於徑向漸變，在不指定漸變類型以及位置的情況下，其漸變距離和位置是由容器的尺寸決定的。

所以像下面舉例容器的寬高比是 2:1 ，最終漸變呈現出來的形狀也是一個 2:1 的橢圓形，並且漸變顏色自動終止於容器的邊緣。

div {
  width: 400px;
  height: 200px;
  background-image: radial-gradient(blue, red);
}

< SHAPE >

如果我們想指定漸變的形狀是一個圓形，形狀不受外部容器尺寸影響，可以使用 circle 關鍵字，其漸變範圍（ 漸變結束線 ）示意如下圖，會發現既不是按照寬度來的，也不是按照高度來的，是按照最遠邊角距離作為漸變結束線的。

div {
  width: 400px;
  height: 200px;
  background-image: radial-gradient(circle, yellow, red);
}

< POSITION >

指定漸變起始點位置可以通過 at 來指定。

div {
  width: 400px;
  height: 200px;
  background-image: radial-gradient(circle at 50px 50px, yellow, red);
}

< SIZE >

使用 closest-side 來指定開始點（ 中心 ）和最近端的邊為圓的尺寸，所以碰到上邊就結束。

background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

使用 farthest-corner 來指定開始點（ 中心 ）和最遠端的角為圓的尺寸，所以碰到容器的角就結束。

background: radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

對於圓形我們只需要指定一個半徑就可以，但是對於橢圓類型的徑向漸變，我們需要同時指定橫軸和縱軸的長度，例如下面例子， 50px 100px ellipse 中第一個數值 50px 表示橫軸半徑， 100px 表示縱軸半徑，於是這段語句表示繪製一個長度 100px 高度 200px 的橢圓。

div {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
}

需要注意的是，在上面示意 CSS 代碼中，透明到黃色分界那裡有一個 1px 的偏差過渡，也就是 transparent 40px, yellow 41px 中 yellow 是 41px ，而不是設置的 40px ，原因在 Chrome 下，如果顏色直接 0 偏差過渡，會有比較嚴重的鋸齒，類似下圖這樣（ 背景色設為 #333 ），通過有 1 像素或者半像素的過渡緩衝可以有效避免鋸齒的出現。

多重背景

radial-gradient 也跟線性漸變一樣是可以實現多重背景的。

div {
  width: 200px;
  height: 200px;
  background-image: 
    radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
    radial-gradient(30px circle, red, red 29px, transparent 30px);
}

配合 background-size 的尺寸控制和背景重複特性，我們可以實現漸變式的複雜紋理效果。

div {
  width: 200px;
  height: 200px;
  background-image: 
    radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px),
    radial-gradient(3px circle, red, red 3px, transparent 4px);
  background-size: 25px 25px;
}

.radial-gradient {
    width: 200px;
    height: 100px;
    background: red;
    position: relative;
}
.radial-gradient:after {
    content: '';
    position: absolute;
    height: 10px;
    left:0 ; right: 0;
    bottom: -10px;
    background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
    background-size: 20px 10px;
}

錯位波點

徑向漸變能夠創建的最簡單的圖案是圓點的陣列。

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

可以生成兩層圓點陣列圖案，並把它們的背景定位錯開，這樣就可以得到真正的波點圖案了。

background: #655;
background-image: 
    radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

repeating-linear-gradient

Safari 和 Chrome 支持替代的 -webkit-repeating-linear-gradient 屬性， Firefox 支持替代的 -moz-repeating-linear-gradient 屬性， Opera 支持替代的 -o-repeating-linear-gradient 屬性。

div {
  background-image: -webkit-repeating-linear-gradient(45deg,#fb3, #fb3 15px,#58a 0, #58a 30px);
  background-image: -moz-repeating-linear-gradient(45deg,#fb3, #fb3 15px,#58a 0, #58a 30px);
  background-image: -o-repeating-linear-gradient(45deg,#fb3, #fb3 15px,#58a 0, #58a 30px);
  background-image: repeating-linear-gradient(45deg,#fb3, #fb3 15px,#58a 0, #58a 30px);
}

工作方式跟 linear-gradient() 類似，只有一點不同：色標是無限循環重複的，直到填滿整個背景。

CSS3 圖案庫（ 位於 lea.verou.me/css3patterns ）展示了 CSS 漸變早在 2011 年就能夠實現的效果。但是，並不是裡面的每個例子都適用於生產環境。其中的某些例子只是用來展示可能性，而且它們用到的代碼極度冗長繁瑣。對於這些例子來說， SVG 可能是更好的選擇。關於 SVG 圖案的演示，請訪問 philbit.com/svgpatterns ，這個網站是 CSS 圖案庫的 SVG 版實現。

所以我們做上面斜向條紋時就不需使用 background-size ，改成 background: repeating-linear-gradient(45deg,#fb3, #fb3 15px,#58a 0, #58a 30px); 一樣可以做出來，最大的好處在於，現在我們可以隨心所欲地改變漸變的角度了，不需要苦苦思索如何生成一個無縫貼片，只需要調整前方角度即可。

老式信封

HTML

<div>My border is reminiscent of vintage envelopes, how cool is that?</div>

CSS

div {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg,red 0, red 12.5%,transparent 0, transparent 25%,#58a 0, #58a 37.5%,transparent 0,transparent 50%) 0 / 5em 5em;
}

螞蟻行軍（ 動畫效果，幾乎所有的圖像編輯軟件都會使用這個效果來標示選區 ）

HTML

<div>Bacon ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham hock. Sausage beef beef ribs aliquip t-bone mollit. Quis beef tri-tip sunt, cupim ut magna salami t-bone. Ut laboris bresaola ribeye biltong landjaeger. Chuck pork belly sed sausage.</div>

CSS

@keyframes ants {
  to {
    background-position: 100%;
  }
}
div {
  padding: 1em;
  border: 1px solid transparent;
  background:
   linear-gradient(white, white) padding-box,
   repeating-linear-gradient(-45deg,black 0, black 25%, white 0,white 50%) 0 / .6em .6em;
  animation: ants 12s linear infinite;
}

repeating-radial-gradient

Safari 和 Chrome 支持替代的 -webkit-repeating-radial-gradient 屬性， Firefox 支持替代的 -moz-repeating-radial-gradient 屬性， Opera 支持替代的 -o-repeating-radial-gradient 屬性。

div {
  background-image: -webkit-repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);
  background-image: -moz-repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);
  background-image: -o-repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);
  background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);
}

工作方式跟 radial-gradient() 類似，只有一點不同：色標是無限循環重複的，直到填滿整個背景。

html, body {
  width: 100%;
  height: 100%;
}
body {
  background-image:
    repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px);
}

background-position

background-position 屬性設置背景圖像的起始位置，該屬性定位不受 padding 的設置影響。

background-repeat

background-repeat 屬性設置是否及如何重複背景圖像。默認地，背景圖像在水平和垂直方向上重複。

背景圖像的位置是根據 background-position 屬性設置的。如果未規定 background-position 屬性，圖像會被放置在元素的左上角，而 background-position 取值的不同對 background-repeat 的效果也將會有一定的影響。

值	描述	範例
repeat	背景圖片會在水平與垂直方向重複。
repeat-x	只在 X 軸（ 水平 ）方向重複顯示。
repeat-y	只在 Y 軸（ 垂直 ）方向重複顯示。
no-repeat	不重複顯示。
round	當使用 background-repeat 取值為 repeat 時，如果背景圖片的尺寸和容器尺寸不能完全匹配之時，會造成背景圖片不全，而使用 round 時會像 repeat 一樣，背景圖片會平鋪整個容器，但和 repeat 不一樣的是，他會根據容器尺寸和圖片尺寸做一個自適應處理。 當圖片重舖的次數不適合一個整數時，會重新調整，使圖片按整數平鋪在整個容器中。類似於 background-size 一樣會自動計算背景圖片尺寸。假設我們有一個 520 x 320 的容器，背景圖片尺寸是一個 100 x 100 的，那麼他會在 x 軸平鋪 5 次，在 y 軸平鋪 3 次，其計算如下： round( 520 / 100 ) = round( 5.2 ) = 5 round( 320 / 100 ) = round( 3.2 ) = 3
space	當使用 background-repeat 取值為 repeat 時，如果背景圖片的尺寸和容器尺寸不能完全匹配之時，會造成背景圖片不全，而使用 space 時背景圖片會平鋪整個容器，不會造成背景圖片裁剪；但也和 round 不一樣，使用 space 時，不夠整數背景圖片平鋪整個容器的時候，會將剩餘的空間平均分配給相鄰背景之間。 假設我們的容器是 520 x 320 ，而背景圖片的尺寸是 100 x 100 。那麼水平方向將會平鋪 5 張背景圖，而相鄰兩張背景圖之間會有一個 20 / 5 = 4 間距。同樣道理，在垂直方向會有一個 20 / 2 = 10 的間距。

不同的 x 和 y 軸的 repeat 值

在 background-repeat 取值是可以將 x 和 y 的值任意組合，比如 round space 、 space round 、 round repeat-y 之類的，如以下範例 round space 。

（ 圖片來源 ）

background-clip

background-clip 屬性規定背景的繪製區域。

對於 background-clip ，其關鍵字是指將背景圖片以 border 的尺寸、以 padding 的尺寸，以 content 的尺寸進行切割，其得到的結果是不完整的背景，也就是其中的一部分（ 原理與截圖差不多 ）。而且有一點要注意， background-clip 的切割是對這個容器背景的切割（ 包括圖片與背景顏色 ）。

值	描述	範例
border-box	背景延伸到邊框外沿（ 但是在邊框之下 ）。
padding-box	邊框下面沒有背景，即背景延伸到內邊距外沿。
content-box	背景裁剪到內容區（ content-box ）外沿。

另外還有一個 text ，它能將背景裁剪為文字的前景色（ 只有 chrome 支持所以要加前綴-webkit-background-clip:text; ）。

div {
  font-size: 180px;
  font-weight: bold;
  color: blue;
  background: url(rice.jpg) no-repeat center center;
  background-size: cover;
}

添加 -webkit-background-clip: text; 然後將文字設為透明 transparent 。

div {
  font-size: 180px;
  font-weight: bold;
  background: url(rice.jpg) no-repeat center center;
  background-size: cover;
  color: transparent;
  -webkit-background-clip: text;
}

（ 圖片來源 ）

background-origin

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位，如果背景不是 no-repeat 的話，這個屬性是無效的。

對於 background-origin ，其關鍵字是指將背景圖片放置到 border 範圍內， padding 範圍內、 content 範圍內，其得到的結果是完整的背景（ 原理與圖片的縮放相似 ）。與 background-clip 不同的是，它只是單純設置背景圖片的邊界，並不會對背景顏色造成影響。

每個元素身上都存在三個矩形框: border box（ 邊框的外沿框 ）、 padding box（ 內邊距的外沿框 ）和 content box（ 內容區的外沿框 ），默認情況下， background-position 是以 padding box 為準的。

值	描述	範例
border-box	背景延伸到邊框外沿（ 但是在邊框之下 ）。
padding-box	邊框下面沒有背景,即背景延伸到內邊距外沿。
content-box	背景裁剪到內容區（ content-box ）外沿。

（ 圖片來源 ）

background-size

background-size 屬性規定背景圖像的尺寸。

在 background-size 取值是可以將 x 和 y 的值任意組合。

值	描述	範例
auto	以圖片自身大小來填充元素。
length／percentage	設置背景圖像的寬度和高度。 第一個值設置寬度，第二個值設置高度。 如果僅給出一個值，則將第二個設置為 auto。
cover	背景要覆蓋元素的所有區域，不能有空白出現。 （等比擴展圖片來填滿元素） background-size：100% 100% 跟 cover 還是有差別，100% 100% 是依容器的比例撐滿，圖片可能會變形， 而 cover 是把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是超出容器的部分可能會裁掉。
contain	整個背景圖都要被包含在元素內，沒有超出的部分。 （ 等比縮小圖片來適應元素的尺寸 ）

（ 圖片來源 ）

isolation

isolation 主要用來設置是否與其他元素隔離。 auto 為默認值，表示元素不隔離。如果想讓元素與其他元素隔離開來，需要將其屬性值設置為 isolate 。

mix-blend-mode 與 isolation 這 2 個屬性是搭配使用的（ background-blend-mode 天生是一個封閉的混合領域，不會影響其他元素。 ），之所以起作用就是單純地因為創建了新的層疊上下文，所以只要元素可以創建層疊上下文，就可以阻斷 mix-blend-mode ，下面的也可以做到：

1. z-index 值不為 auto 的 position : relative / position : absolute 定位元素。
2. position : fixed ，僅限 Chrome 瀏覽器，其他瀏覽器遵循上一條，需要 z-index 為數值。
3. z-index 值不為 auto 的 flex 項( 父元素 display : flex | inline-flex ) 。
4. 元素的 opacity 值不是 1 。
5. 元素的 transform 值不是 none 。
6. 元素 mix-blend-mode 值不是 normal 。
7. 元素的 filter 值不是 none 。
8. will-change 指定的屬性值為上面任意一個。
9. 元素的 -webkit-overflow-scrolling 設為 touch 。

HTML

<div class="outer-wrapper">
    <div class="inner-wrapper">
        <img src="img.jpg" alt="" class="blending-image">
    </div>
</div>

CSS

.outer-wrapper {
  background: blue;
}
.blending-image {
  mix-blend-mode: difference;
}

效果

.inner-wrapper {
  isolation: isolate;
}

CSS 加上 isolate 可以看到混和模式失效了

（ 圖片來源 ）

mix-blend-mode

上次講了 background-blend-mode ，這次換 mix-blend-mode ，一樣讓想像力變成超能力，把 mix-blend-mode 想成是一隻變色龍，不只背景，周遭的人事物都有可能會影響到牠，噓！走路小聲點不要嚇到牠了，接下來讓你更深入了解這個屬性！

（ 圖片來源 ）

目前 IE 瀏覽器不支持 mix-blend-mode 屬性。

mix-blend-mode 這種混合模式就如同 Photoshop 中的「 圖層混合模式 」，會與下層圖層的色彩進行混合，默認情況下是會混合所有比層疊順序低的元素，它是應用於多個元素，而且除背景外，元素內的文字等其他內容也會被混合，也可以這樣理解，它會把當前元素和所有在其下方重疊的背景或元素都混和起來。

background-blend-mode 是應用在單個元素的背景之間（ background 裡面 ）， 它還支持多背景混合，可以把 background 想像是一台果汁機，只會攪和機器內的食物，不會被外面的一切干擾到，而 mix-blend-mode 則是應用於多個元素，除背景外，元素內的文字等其他內容也會被混合。

mix-blend-mode 比較類似 opacity ，作用於一個元素的同時也會作用於這個元素的全部子元素，因此，如果不想要子元素內容也受到影響（ 就像設置半透明時可能希望裡面的文字仍是不透明的 ），改用 background-blend-mode 會更合適。

（ 圖片來源 ）

上圖是 PS 中的混合模式，數量比 CSS 中的多出幾個，但 CSS 已經能夠在各種不同的模式中演算出多達 16 種效果，如上圖粉紅色的字。

background-blend-mode 及 mix-blend-mode 這兩種混合模式的值是相同的。

HTML

<div>
    <img src="img.jpg">
</div>

CSS

div {
    background-color: navy;
    padding: 20px;
}
div > img {
    mix-blend-mode: 
      normal | multiply | screen | overlay | 
      darken | lighten | color-dodge | color-burn | 
      hard-light | soft-light | difference | exclusion | 
      hue | saturation | color | luminosity;
}

下面有 花朵圖片 加 藍色背景 的混和範例：

值	描述	範例
normal （ 一般 ）	為屬性預設的值，沒有被混合只選擇上層圖層的顏色。
multiply （ 色彩增值 ）	將背景以及來源色彩（ 上層圖片 ）的顏色相乘，並替換掉原本的顏色，結果色會比來源色或目標色暗。 將任何色與黑色相乘結果為黑色，將任何色與白色相乘則維持原來的顏色。
screen （ 濾色 ）	將背景以及來源色的補值相乘，得到補色相乘的結果，結果色會比背景或來源色還要亮。 將任何色過濾白色得到白色；將來源色過濾黑色則結果不變。 效果近似於將好幾個投影片投影在單一個投影幕上。
overlay （ 覆蓋 ）	相乘或過濾顏色，取決於背景的顏色值。 當來源色過濾背景時保留原本的強光以及陰影，背景顏色並非被取代，而是與來源色混合展現背景的亮部或暗部。
darken （ 變暗 ）	保留背景以及來源色彩中較暗的色彩。 背景會與來源色彩中較暗的顏色混合。
lighten （ 變亮 ）	保留背景以及來源色彩中較亮的顏色。 背景會與來源色彩中較亮的顏色混合。
color-dodge （ 加亮顏色－減淡 ）	將背景加亮來展現來源色。 如果背景為黑色不會有任何改變。
color-burn （ 加深顏色 ）	減低背景色亮度反映出來源色。 如果背景為白色不會有任何改變。
hard-light （ 實光 ）	將顏色相乘或過濾，取決於來源色的顏色值。 效果近似於強烈的聚光燈照在背景圖片上。
soft-light （ 柔光 ）	將顏色加深或加亮，取決於來源色的顏色值。 效果近似於漫射的聚光燈照在背景圖片上。
difference （ 差異化 ）	用亮色減去兩個來源色中的深色。 如果背景為白色則為反轉色，背景為黑色則不會有任何改變。
exclusion （ 排除 ）	效果近似於差異化但對比度較低。
hue （ 色相 ）	用來源色的色相創造出另一個顏色，結合背景原來的飽和度及亮度。
saturation （ 飽和度 ）	用來源色的飽和度創造出另一個顏色，結合背景原來的飽和度及亮度。 如果背景為灰階（ 無飽和度 ）的狀態下不會有任何效果。
color （ 顏色 ）	用來源色的色相以及飽和度創造出另一個顏色，結合背景原來的亮度。 保留了背景的灰階，對於單色圖像的色彩化或是圖像的著色很有幫助。
luminosity （ 明度 ）	用來源色的明度創造出另一個顏色，結合背景原來的色相及飽和度。 這與顏色模式的效果正好相反。

使用 mix-blend-mode 製作文字背景圖

（ 圖片來源 ）

可以嘗試讓文字帶上漸變色，或者說讓文字透出圖片，當然這個效果有一些 CSS 屬性也可以完成，譬如 background-clip: text 背景裁剪就可以讓文字帶上漸變色或者展示圖片，而這裡是使用 mix-blend-mode ，只需要建構出黑色文字、白色底色的文字 div ，疊加上圖片，再運用 mix-blend-mode 即可，簡單原理如下：

HTML

<div class="container">
    <div class="pic"><div class="text">IMAGE</div></div>
</div>

CSS

.pic {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('flowers.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.text {
  position: absolute;
  width:100%;
  height:100%;
  color: #000;
  mix-blend-mode: lighten;
  background-color: #fff;
}

參考資料

1. CSS background 属性
2. CSS沒有極限 - 意想不到的background-attachment
3. 《CSS3 mix-blend-mode 》網頁版的Photoshop圖層混合模式
4. CSS mix-blend-mode－直接在網頁呈現Photoshop的圖層混合模式
5. CSS background-blend-mode Property
6. CSS background-image Property
7. background 線性漸變
8. CSS 揭秘（ Lea Verou 著／ CSS 魔法 譯 ）
9. 10个demo示例学会CSS3 radial-gradient径向渐变
10. CSS background-position 属性
11. 单聊background-repeat ）
12. 有趣的CSS题目:奇妙的 background-clip:text