背景圖片 ( 多重背景、混合模式 )
所有的背景圖片 CSS 樣式都支援「多重背景」的設定,運用多重背景的方法,就能讓原本只能使用單一背景的樣式,變成多張背景的特殊效果,此外,也會使用 background-blend 的樣式屬性,讓不同元素之間的背景產生特別的混合效果。
快速導覽:
多重背景
所有的背景圖片 CSS 樣式都支援「多重背景」的設定,只要使用「逗號 ,
」分隔不同的背景與背景屬性,就能呈現多重背景效果,雖然使用多重背景很簡單,但仍需要注意下列事項:
background-color
不支援多重背景。- 多個屬性值裡只要有一個寫錯,會造成整個樣式失效 ( 使用預設值呈現 )。
- 如果不同樣式間屬性值數量不同,多出來的背景屬性會從屬性值少的第一項開始重複套用。
下方範例會替 div 加入「兩張圖片」作為背景圖,其中一張使用透明色背景,並分別設定兩張背景圖片的尺寸和重複樣式。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 300px;
height: 200px;
border: 1px solid #000;
background-image:
url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
url("https://steam.oxxostudio.tw/image/index-css.jpg");
background-size: 70px, 50px;
background-repeat: space, round;
}
</style>
如果不同樣式間屬性值數量不同,多出來的背景屬性會從屬性值少的第一項開始重複套用,下方範例中 background-image
設定了三張背景圖,但 background-size
和 background-repeat
卻只設定了兩個屬性值,因此第三張背景圖就會使用兩個屬性值的第一個。
第一張使用第一個,第二張使用第二個,第三張因為沒有第三個,所以從第一個開始重複套用。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 300px;
height: 300px;
border: 1px solid #000;
background-image:
url("https://cdn-icons-png.freepik.com/16/11694/11694600.png"),
url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
url("https://steam.oxxostudio.tw/image/index-css.jpg");
background-size: 55px, 100px;
background-repeat: space, repeat-x;
}
</style>
有別於 HTML 文件元素結構裡「越下方元素」,在圖層結構中會擺在越上層,多重背景圖片寫在「越前方的背景圖片」,在圖層結構中則會擺在的越上層,下方範例中的第一個 div 裡使用 img 元素,放在後方的元素會蓋住前方的元素,但第二個 div 的多重背景圖,則是放在前方的背景圖蓋住放在後方的背景圖。
<!-- HTML 程式碼 -->
<div class="a">
<img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img src="https://steam.oxxostudio.tw/image/index-css.jpg">
</div>
<div class="b"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 150px;
border: 1px solid #000;
margin: 10px;
overflow: hidden;
position: relative;
}
.a img{
position: absolute;
width: 120px;
}
.b {
background-image:
url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
url("https://steam.oxxostudio.tw/image/index-css.jpg");
background-size: 60px, 50px;
background-repeat: space, round;
}
</style>
background-blend-mode 背景混合模式
background-blend-mode
可以設定背景圖片「混合模式」,沒有繼承特性,混合模式就如同 PhotoShop 等影像處理軟體的圖層混合模式,使用不同的演算法,將每個像素不同的色彩或亮度進行混合,CSS 的混合模式提供下列的屬性值:
屬性值 | 混合模式 | 說明 |
---|---|---|
normal | 一般 ( 預設值 ) | 不進行混合,一張疊著一張。 |
multiply | 色彩增值 | 類似使用透明膠片重疊兩個影像。 |
screen | 濾色 | 類似使用投影螢幕重疊兩個影像。 |
overlay | 覆蓋 | 偏亮部分套用濾色效果,偏暗部分套用色彩增值效果。混合後亮的更亮,暗的更暗。 |
darken | 變暗 | 使用比較暗的顏色進行混合。 |
lighten | 變亮 | 使用比較亮的顏色進行混合。 |
color-dodge | 加亮顏色 | 顏色變亮並降低對比度後進行混合。 |
color-burn | 加深顏色 | 顏色加深並增強對比度後進行混合。 |
hard-light | 實光 | 類似在影像照射強烈聚光燈,使用濾色將偏亮的顏色變亮,使用色彩增值將偏暗的顏色變暗。 |
soft-light | 柔光 | 類似在影像照射漫射聚光燈,使用加亮顏色將偏亮的顏色變亮,使用加深顏色將偏暗的顏色變暗。 |
difference | 差異化 | 混合相減之後的顏色。 |
exclusion | 排除 | 類似差異化,但降低對比效果。 |
hue | 色相 | 單純混合色相。 |
saturation | 飽和度 | 單純混合飽和度。 |
color | 顏色 | 單純混合顏色。 |
luminosity | 明度 | 單純混合名度。 |
下方範例使用不同的 div,呈現「漸層色」和「背景圖」的不同混合效果。
<!-- HTML 程式碼 -->
<div class="a"><span>normal</span></div>
<div class="b"><span>multiply</span></div>
<div class="c"><span>screen</span></div>
<div class="d"><span>overlay</span></div>
<div class="e"><span>darken</span></div>
<div class="f"><span>lighten</span></div>
<div class="g"><span>color-dodge</span></div>
<div class="h"><span>color-burn</span></div>
<div class="i"><span>hard-light</span></div>
<div class="j"><span>soft-light</span></div>
<div class="k"><span>difference</span></div>
<div class="l"><span>exclusion</span></div>
<div class="m"><span>hue</span></div>
<div class="n"><span>saturation</span></div>
<div class="o"><span>color</span></div>
<div class="p"><span>luminosity</span></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 150px;
height: 150px;
border: 1px solid #000;
float: left;
margin: 5px 5px 30px 5px;
position: relative;
background-size: cover;
background-image:
repeating-linear-gradient(yellow 0%, black 20%),
url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png");
}
div span{
display: block;
position: absolute;
width: 100%;
bottom: -25px;
text-align: center;
}
.a {background-blend-mode: normal;}
.b {background-blend-mode: multiply;}
.c {background-blend-mode: screen;}
.d {background-blend-mode: overlay;}
.e {background-blend-mode: darken;}
.f {background-blend-mode: lighten;}
.g {background-blend-mode: color-dodge;}
.h {background-blend-mode: color-burn;}
.i {background-blend-mode: hard-light;}
.j {background-blend-mode: soft-light;}
.k {background-blend-mode: difference;}
.l {background-blend-mode: exclusion;}
.m {background-blend-mode: hue;}
.n {background-blend-mode: saturation;}
.o {background-blend-mode: color;}
.p {background-blend-mode: luminosity;}
</style>
小結
CSS 的多重背景是許多網頁設計常用的技巧,不僅可以減少 HTML 裡圖片元素的使用,更能實現許多有趣的效果,不妨立刻在自己的網站中加入多重背景吧!
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~