背景滤镜 ( 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

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

使用背景滤镜 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 教学

基本介绍

CSS 选择器

数值与单位

规则与定义

函数类型

颜色与滤镜

文字与段落

元素容器

背景与阴影

清单与表格

基本排版与定位

Flex 弹性排版

Grid 网格排版

转场与动画

变形、裁切与遮罩

视窗与用户行为

CSS 预处理器

范例效果