CSS 背景濾鏡 backdrop-filter

CSS 的 backdrop-filter 是和 filter 影像濾鏡類似的樣式屬性，有別於 filter 是針對「元素」，backdrop-filter 是針對「元素背景」套用濾鏡，這篇教學會使用 backdrop-filter 搭配 blur()、brightness()、contrast()、invert()、drop-shadow()、opacity()、grayscale() 等函式進行背景的濾鏡處理，創造出漂亮的網頁效果。

額外參考：CSS 影像濾鏡 filter

CSS 教學 - CSS 背景濾鏡 backdrop-filter

使用背景濾鏡 backdrop-filter

使用 backdrop-filter 是「背景濾鏡」類型的 CSS 函式 ( 目前除了 IE，所有瀏覽器都支援 )，沒有繼承特性，使用時需要搭配影像濾鏡函式操作，使用後元素本身不會套用影像濾鏡，但下層元素被遮住的範圍都會套用，寫法如下：

div {
  backdrop-filter: 濾鏡函式();
}

backdrop-filter 搭配的影像濾鏡函式：

數學計算函式	說明
blur()	高斯模糊。
brightness()	亮度。
contrast()	對比度。
grayscale()	灰階效果。
invert()	負片效果。
sepia()	棕褐色效果。
saturate()	飽和度 ( 彩度 )。
hue-rotate()	色相。

下方範例會呈現三種套用「模糊」的背景濾鏡效果，可以看見被元素遮住範圍的下層元素，不論是文字、背景色或背景圖都會變得模糊，而元素本身的背景與內容都會維持清楚的狀態。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div><h3>XOOX</h3><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    float: left;
    position: relative;
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,
        orange 0%,  orange 10%,
        black 10%, black 20%);
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
  h2, h3 {
    position: absolute;   /* 讓 h2 與 h3 可以重疊 */
    margin: 0;
    color: #fff;
    left: 0;
    text-align: center;
    width: 100%;
  }
  h2 {
    top: 50px;
    height: 100px;
    z-index:3;
    border: 2px solid #fff;
    border-width: 2px 0;
    backdrop-filter: blur(7px);  /* 套用背景濾鏡 */
    font-size: 50px;
    /* 定義元素本身背景 */
    background: repeating-linear-gradient(
        #0003 0%,  #0003 10%,
        #fff3 10%, #fff3 30%),
      repeating-linear-gradient(90deg,
        #0003 0%,  #0003 5%,
        #fff3 5%, #fff3 32%);
  }
  h3 {
    top: 0;
    z-index:1;       /* 使其派列在 h2 下層 */
    font-size: 65px;
  }
</style>

CSS 教學 - 背景濾鏡 backdrop-filter

blur()

「blur()」是「高斯模糊」CSS 函式，使用後會替背景加上高斯模糊的效果，只有一個「模糊半徑」的參數，參數使用長度單位，下方的範例執行後，會將元素背景分別套用不同的模糊效果。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
  h2 {
    margin: 45px 0;
    font-size: 50px;
    color: #fff;
    text-align: center;
    height: 100px;
    border: 2px solid #fff;
    border-width: 2px 0;
    backdrop-filter: blur(5px);
  }
  .f h2 {backdrop-filter: blur(15px);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - blur()

brightness()

「brightness()」是「亮度」CSS 函式，使用後可以調整背景色彩的亮度，只有一個無單位的「數字」參數，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設亮度為 1 或 100%，設定 0 或 0% 為最暗，設定超過 1 或 100% 則會變亮，下方的範例執行後，會將元素背景分別套用不同的亮度。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
  h2 {
    color: #fff;
    text-align: center;
    height: 100px;
    border: 2px solid #fff;
    border-width: 2px 0;
    backdrop-filter: brightness(0.5);
    font-size: 50px;
  }
  .f h2 {backdrop-filter: brightness(5);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - brightness()

contrast()

「contrast()」是「對比度」CSS 函式，使用後可以調整元素背景色彩的對比度，只有一個無單位的「數字」參數，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設對比度為 1 或 100%，設定 0 或 0% 為沒有對比 ( 灰色一片 )，設定超過 1 或 100% 則對比度會增加，下方的範例執行後，會將元素背景分別套用不同的對比度。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
  h2 {
    color: #fff;
    text-align: center;
    height: 100px;
    border: 2px solid #fff;
    border-width: 2px 0;
    backdrop-filter: contrast(0.3);
    font-size: 50px;
  }
  .f h2 {backdrop-filter: contrast(3);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - contrast()

grayscale()

「grayscale()」是「灰階效果」CSS 函式，使用後會將元素背景的顏色轉換成灰階的黑白色彩，只有一個無單位的「數字」參數，範圍「0～1」，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設值為 0 或 0% 表示呈現原本色彩，設定 1 或 100% 則是完全灰階，下方的範例執行後，會將元素背景分別套用不同的灰階效果。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
h2 {
  color: #fff;
  text-align: center;
  height: 100px;
  border: 2px solid #fff;
  border-width: 2px 0;
  backdrop-filter: grayscale(0.3);
  font-size: 50px;
}
.f h2 {backdrop-filter: grayscale(1);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - grayscale()

invert()

「grayscale()」是「負片效果」CSS 函式，使用後會將元素背景的顏色反轉為負片效果，只有一個無單位的「數字」參數，範圍「0～1」，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設值為 0 或 0% 表示呈現原本色彩，設定 1 或 100% 則是完全負片，如果設定 0.5 或 50% 則會是顏色平均的灰色，下方的範例執行後，會將元素背景分別套用不同的負片效果。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
h2 {
  color: #fff;
  text-align: center;
  height: 100px;
  border: 2px solid #fff;
  border-width: 2px 0;
  backdrop-filter: invert(0.6);
  font-size: 50px;
}
.f h2 {backdrop-filter: invert(1);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - invert()

sepia()

「sepia()」是「棕褐色效果」CSS 函式，使用後會將元素背景色彩轉換成棕褐色，只有一個無單位的「數字」參數，範圍「0～1」，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設值為 0 或 0% 表示呈現原本色彩，設定 1 或 100% 則是完全棕褐色，下方的範例執行後，會將元素背景分別套用不同的棕褐色效果。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
h2 {
  color: #fff;
  text-align: center;
  height: 100px;
  border: 2px solid #fff;
  border-width: 2px 0;
  backdrop-filter: sepia(0.8);
  font-size: 50px;
}
.f h2 {backdrop-filter: sepia(1);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - sepia()

saturate()

「saturate()」是「飽和度、彩度」CSS 函式，使用後會調整元素背景色彩的飽和度，只有一個無單位的「數字」參數，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設飽和度為 1 或 100%，設定 0 或 0% 為不飽和 ( 灰階狀態 )，設定超過 1 或 100% 則會變得更飽和，下方的範例執行後，會將元素背景分別套用不同的飽和度。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
h2 {
  color: #fff;
  text-align: center;
  height: 100px;
  border: 2px solid #fff;
  border-width: 2px 0;
  backdrop-filter: saturate(0.3);
  font-size: 50px;
}
.f h2 {backdrop-filter: saturate(0);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - saturate()

hue-rotate()

「hue-rotate()」是「色相」CSS 函式，使用後會根據色相環的角度改變元素背景色彩，使用一個單位是角度的「數字」參數，數值範圍 0deg～359deg ( 可以超過或負值 )，0deg 為預設顏色，下方的範例執行後，會將元素背景修改成不同的色相。

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

<!-- HTML 程式碼 -->
<div><h2>oxxo</h2></div>
<div class="a"><h2>oxxo</h2></div>
<div class="f"><h2>oxxo</h2></div>
<div class="a f"><h2>oxxo</h2></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(45deg,orange 0%,  orange 10%, black 10%, black 20%);
    float: left;
  }
  .a {
    background-size: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
  }
h2 {
  color: #fff;
  text-align: center;
  height: 100px;
  border: 2px solid #fff;
  border-width: 2px 0;
  backdrop-filter: hue-rotate(90deg);
  font-size: 50px;
}
.f h2 {backdrop-filter: hue-rotate(180deg);}
</style>

CSS 教學 - 背景濾鏡 backdrop-filter - saturate()

小結

CSS 的「背景濾鏡」函式相當好用，特別是要製作一些簡單的 banner 選單效果更是如魚得水，隨著瀏覽器支援度的提高，一些特殊效果不妨可以使用這些濾鏡函式來實現，就不需要仰賴修圖軟體，也可以省下不少的網站空間和流量。

意見回饋

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

CSS 背景濾鏡 backdrop-filter

使用背景濾鏡 backdrop-filter

blur()

brightness()

contrast()

grayscale()

invert()

sepia()

saturate()

hue-rotate()

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

範例效果