CSS保健室｜background-image

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);
}

參考資料

1. CSS background 属性
2. CSS background-image Property
3. background 線性漸變
4. CSS 揭秘（ Lea Verou 著／ CSS 魔法 譯 ）
5. 10个demo示例学会CSS3 radial-gradient径向渐变