背景圖片 ( 多重背景、混合模式 )

所有的背景圖片 CSS 樣式都支援「多重背景」的設定，運用多重背景的方法，就能讓原本只能使用單一背景的樣式，變成多張背景的特殊效果，此外，也會使用 background-blend 的樣式屬性，讓不同元素之間的背景產生特別的混合效果。

快速導覽：

• 多重背景
• background-blend-mode 背景混合模式

多重背景

所有的背景圖片 CSS 樣式都支援「多重背景」的設定，只要使用「逗號 ,」分隔不同的背景與背景屬性，就能呈現多重背景效果，雖然使用多重背景很簡單，但仍需要注意下列事項：

• background-color 不支援多重背景。
• 多個屬性值裡只要有一個寫錯，會造成整個樣式失效 ( 使用預設值呈現 )。
• 如果不同樣式間屬性值數量不同，多出來的背景屬性會從屬性值少的第一項開始重複套用。

下方範例會替 div 加入「兩張圖片」作為背景圖，其中一張使用透明色背景，並分別設定兩張背景圖片的尺寸和重複樣式。

線上展示：https://codepen.io/oxxo/pen/zYVBxMg

<!-- 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 卻只設定了兩個屬性值，因此第三張背景圖就會使用兩個屬性值的第一個。

第一張使用第一個，第二張使用第二個，第三張因為沒有第三個，所以從第一個開始重複套用。

線上展示：https://codepen.io/oxxo/pen/VwJjYqK

<!-- 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 的多重背景圖，則是放在前方的背景圖蓋住放在後方的背景圖。

線上展示：https://codepen.io/oxxo/pen/OJeXPrO

<!-- 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 的混合模式提供下列的屬性值：

下方範例使用不同的 div，呈現「漸層色」和「背景圖」的不同混合效果。

線上展示：https://codepen.io/oxxo/pen/jOjrEXv

<!-- 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 裡圖片元素的使用，更能實現許多有趣的效果，不妨立刻在自己的網站中加入多重背景吧！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～