前言

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

圖片來源

 


 

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

屬性 說明
background 簡寫屬性,設置所有的背景屬性。
background-attachment 設置背景圖像是否固定或者隨著頁面的其餘部分滾動。
background-blend-mode 針對「 背景圖片 」的混合模式,可以是背景圖片與背景圖片的混合,也可以是背景圖片和背景色的之間的混合。
background-color 設置元素的背景顏色。
background-image 設置元素的背景圖像。
background-position 設置背景圖像的起始位置,該屬性定位不受 padding 的設置影響。
background-repeat 設置是否及如何重複背景圖像。
background-clip 規定背景的繪製區域。
background-origin 規定 background-position 屬性相對於什麼位置來定位,如果背景不是no-repeat的話,這個屬性是無效的。
background-size 規定背景圖像的尺寸。
isolation 設置是否與其他元素隔離。
mix-blend-mode 針對「 圖層混合模式 」的混合模式,它會把當前元素和所有在其下方重疊的背景或元素都混和起來。

 


 

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 就不能不提到鹿丸,看要牽制對方行動或用影子強迫對方做與施術者相同的動作,這可是奈良一族獨創的忍術耶,我們趕快去找他請教一下吧!

cover

圖片來源

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

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

 

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

 

利用 local + 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 做出的固定陰影效果

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 做出的固定陰影效果

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 想像成是一台蔬果榨汁機,你加入的食材會決定果汁最後的顏色,開關打開了,你快一起過來看看!

cover

圖片來源

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

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

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

( 圖片來源:木頭

 


 

background-color

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

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

 

描述
url( 'URL' ) 圖片連結,如果要指定多個圖片,須用逗號分隔。
none 默認值,不顯示背景圖像。
linear-gradient() 將線性漸變設置為背景圖像,至少定義兩種顏色。
radial-gradient() 將徑向漸變設置為背景圖像,至少定義兩種顏色。
repeating-linear-gradient() 重複線性漸變。
repeating-radial-gradient() 重複徑向漸變。

 


 

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 的設置影響。

描述
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
默認值:0% 0%。
如果僅規定了一個關鍵詞,那麼第二個值將是 "center" 。
x% y% 第一個值是水平位置,第二個值是垂直位置。
左上角是 0% 0% 。右下角是 100% 100% 。
如果僅規定了一個值,另一個值將是 50% 。
xpos ypos 第一個值是水平位置,第二個值是垂直位置。
左上角是 0 0 。單位是像素( 0px 0px )或任何其他的 CSS 單位。
如果僅規定了一個值,另一個值將是 50% 。
可以混合使用 % 和 position 值。

 


 

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 想成是一隻變色龍,不只背景,周遭的人事物都有可能會影響到牠,噓!走路小聲點不要嚇到牠了,接下來讓你更深入了解這個屬性!

cover

圖片來源

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

#css #css保健室 #background #background-attachment #background-blend-mode #background-color #background-image #background-position #background-repeat #background-clip #background-origin #background-size #isolation #mix-blend-mode #linear-gradient #radial-gradient #repeating-linear-gradient #repeating-radial-gradient







Related Posts

Day 109

Day 109

0 - 0.5 的實體伺服器架設

0 - 0.5 的實體伺服器架設

html 自己看系列

html 自己看系列


Comments