搜尋

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

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

快速導覽:

CSS 教學 - 背景圖片 ( 多重背景、混合模式 )

多重背景

所有的背景圖片 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>

CSS 教學 - 背景圖片 ( 多重背景、混合模式 ) - 多重背景

如果不同樣式間屬性值數量不同,多出來的背景屬性會從屬性值少的第一項開始重複套用,下方範例中 background-image 設定了三張背景圖,但 background-sizebackground-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>

CSS 教學 - 背景圖片 ( 多重背景、混合模式 ) - 多重背景屬性值數量不同

有別於 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>

CSS 教學 - 背景圖片 ( 多重背景、混合模式 ) - 放在前方的背景圖蓋住放在後方的背景圖

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,呈現「漸層色」和「背景圖」的不同混合效果。

線上展示: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 教學 - 背景圖片 ( 多重背景、混合模式 ) - background-blend-mode 背景混合模式

小結

CSS 的多重背景是許多網頁設計常用的技巧,不僅可以減少 HTML 裡圖片元素的使用,更能實現許多有趣的效果,不妨立刻在自己的網站中加入多重背景吧!

意見回饋

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

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與內容函式

變數 數學計算 文字與清單計數 生成內容與引號

顏色與濾鏡

色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子 Flexbox 對齊方式 Flexbox 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 動畫觸發事件 多重動畫的權重與順序

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask )