图像滤镜 ( filter )

过去 CSS 要使用模糊、对比度、亮度等图像滤镜函数时，需要加上“-webkit-”开头识别名称，随着浏览器的进步，只要使用 filter 样式属性搭配 blur()、brightness()、contrast()、invert()、drop-shadow()、opacity()、grayscale() 等滤镜函数，就能做出各种饶富创意的网页特效，这篇教学会介绍 CSS 的 filter 与“图像滤镜” CSS 函数。

额外参考：CSS 背景滤镜 backdrop-filter

CSS 教学 - CSS 函数 ( 图像滤镜 )

教学影片

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

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

使用图像滤镜 filter

使用 filter 是“图像滤镜”类型的 CSS 函数 ( 目前除了 IE，所有浏览器都支援 )，没有继承特性，使用时需要搭配图像滤镜函数操作，使用后整个元素都会套用图像滤镜，不论是边框还是背景色都会一并套用，写法如下：

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

搭配的图像滤镜函数：

图像滤镜函数	说明
blur()	高斯模糊。
brightness()	亮度。
contrast()	对比度。
drop-shadow()	阴影。
grayscale()	灰阶效果。
invert()	负片效果。
sepia()	棕褐色效果。
saturate()	饱和度 ( 彩度 )。
hue-rotate()	色相。
opacity()	透明度。

blur()

“blur()”是“高斯模糊”CSS 函数，使用后会替元素加上高斯模糊的效果，只有一个“模糊半径”的参数，参数使用长度单位，下方的范例执行后，会将 HTML 的元素分别套用不同的模糊效果。

线上展示：https://codepen.io/oxxo/pen/ZENLNwy

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: red;
    margin:0;
  }
  img {
    width:120px;
    border: 1px solid #000;
  }
  .a {filter: blur(2px);}
  .b {filter: blur(4px);}
  .c {filter: blur(6px);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - blur()

brightness()

“brightness()”是“亮度”CSS 函数，使用后可以调整元素色彩的亮度，只有一个无单位的“数字”参数，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认亮度为 1 或 100%，设定 0 或 0% 为最暗，设定超过 1 或 100% 则会变亮，下方的范例执行后，会将 HTML 的元素分别套用不同的亮度。

线上展示：https://codepen.io/oxxo/pen/GRaraLV

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: red;
    margin:0;
  }
  img {
    width:120px;
    border: 1px solid #000;
  }
  .a {filter: brightness(0.3);}
  .b {filter: brightness(1.3);}
  .c {filter: brightness(2);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - brightness()

contrast()

“contrast()”是“对比度”CSS 函数，使用后可以调整元素色彩的对比度，只有一个无单位的“数字”参数，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认对比度为 1 或 100%，设定 0 或 0% 为没有对比 ( 灰色一片 )，设定超过 1 或 100% 则对比度会增加，下方的范例执行后，会将 HTML 的元素分别套用不同的对比度。

线上展示：https://codepen.io/oxxo/pen/gOJgNLa

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
    border: 1px solid #000;
  }
  .a {filter: contrast(0.3);}
  .b {filter: contrast(1.3);}
  .c {filter: contrast(2);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - contrast()

drop-shadow()

“drop-shadow()”是“阴影”CSS 函数，使用后会替元素加上阴影，具有必填的“阴影 x、y 位置”参数和选填的“阴影颜色、阴影模糊半径”参数，参数说明如下：

阴影参数	数值	说明
x	有距离单位的整数或浮点数	阴影离元素的水平距离，右为正，左为负。
y	有距离单位的整数或浮点数	阴影离元素的垂直距离，下为正，上为负。
r	有距离单位的整数或浮点数	阴影的模糊程度。
color	颜色单位	阴影的颜色，默认使用元素本身的颜色设定，如果元素是图片就是黑色。

下方范例会呈现不同的阴影效果，值得一提的是如果将 drop-shadow() 套用到“背景透明”的图片 ( 例如 png 格式图片 )，图片的透明区域并不会有阴影，可以做出很完美的阴影效果。

注意，阴影的阶层 ( 图层 ) 和元素相同，在上方元素的阴影会覆盖下方的元素。

线上展示：https://codepen.io/oxxo/pen/zYQNVzm

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
  }
  img {
    width:120px;
  }
  .a {filter: drop-shadow(15px 25px 10px #000);}
  .b {filter: drop-shadow(-5px -30px 30px);}
  .c {filter: drop-shadow(5px 5px 2px);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - drop-shadow()

grayscale()

“grayscale()”是“灰阶效果”CSS 函数，使用后会将元素的颜色转换成灰阶的黑白色彩，只有一个无单位的“数字”参数，范围“0～1”，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认值为 0 或 0% 表示呈现原本色彩，设定 1 或 100% 则是完全灰阶，下方的范例执行后，会将 HTML 的元素分别套用不同的灰阶效果。

线上展示：https://codepen.io/oxxo/pen/rNgjEGr

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
  }
  .a {filter: grayscale(0.2);}
  .b {filter: grayscale(0.5);}
  .c {filter: grayscale(1);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - grayscale()

invert()

“grayscale()”是“负片效果”CSS 函数，使用后会将元素的颜色反转为负片效果，只有一个无单位的“数字”参数，范围“0～1”，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认值为 0 或 0% 表示呈现原本色彩，设定 1 或 100% 则是完全负片，如果设定 0.5 或 50% 则会是颜色平均的灰色，下方的范例执行后，会将 HTML 的元素分别套用不同的负片效果。

线上展示：https://codepen.io/oxxo/pen/KKLajyy

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
  }
  .a {filter: invert(0.3);}
  .b {filter: invert(0.5);}
  .c {filter: invert(1);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - invert()

sepia()

“sepia()”是“棕褐色效果”CSS 函数，使用后会将元素色彩转换成棕褐色，只有一个无单位的“数字”参数，范围“0～1”，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认值为 0 或 0% 表示呈现原本色彩，设定 1 或 100% 则是完全棕褐色，下方的范例执行后，会将 HTML 的元素分别套用不同的棕褐色效果。

线上展示：https://codepen.io/oxxo/pen/ZENLdrR

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
  }
  .a {filter: sepia(0.3);}
  .b {filter: sepia(0.5);}
  .c {filter: sepia(1);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - sepia()

saturate()

“saturate()”是“饱和度、彩度”CSS 函数，使用后会调整元素色彩的饱和度，只有一个无单位的“数字”参数，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认饱和度为 1 或 100%，设定 0 或 0% 为不饱和 ( 灰阶状态 )，设定超过 1 或 100% 则会变得更饱和，下方的范例执行后，会将 HTML 的元素分别套用不同的饱和度。

线上展示：https://codepen.io/oxxo/pen/rNgjEvq

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
  }
  .a {filter: saturate(0.2);}
  .b {filter: saturate(1.5);}
  .c {filter: saturate(3);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - saturate()

hue-rotate()

“hue-rotate()”是“色相”CSS 函数，使用后会根据色相环的角度改变元素色彩，使用一个单位是角度的“数字”参数，数值范围 0deg～359deg ( 可以超过或负值 )，0deg 为默认颜色，下方的范例执行后，会将 HTML 的元素修改成不同的色相。

线上展示：https://codepen.io/oxxo/pen/BaepgPW

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
  }
  .a {filter: hue-rotate(0deg);}
  .b {filter: hue-rotate(-180deg);}
  .c {filter: hue-rotate(300deg);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - hue-rotate()

opacity()

“opacity()”是“透明度”CSS 函数，使用后会调整元素的透明度，只有一个无单位的“数字”参数，范围 0～1，亦可将数字对应到百分比，例如“0=0%、0.55=55%、1=100%”，默认为 1 或 100% 表示不透明，设定 0 或 0% 为全透明，下方的范例执行后，会将 HTML 的元素分别套用不同的透明度。

线上展示：https://codepen.io/oxxo/pen/vYwgqzL

<!-- HTML 程式碼 -->
<h2 class="a">oxxo.studio</h2>
<h2 class="b">oxxo.studio</h2>
<h2 class="c">oxxo.studio</h2>
<br/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin:0;
    color: red;
    background: orange;
  }
  img {
    width:120px;
  }
  .a {filter: opacity(0.1);}
  .b {filter: opacity(0.5);}
  .c {filter: opacity(0.8);}
</style>

CSS 教学 - CSS 函数 ( 图像滤镜 ) - hue-rotate()

小结

CSS 的“图像滤镜”函数相当好用，但由于早期 IE 并不支援，所以实际应用的广泛程度并没有很高，但如果是一些具有大量图像效果的网页，或许就是大量应用了 CSS 图像滤镜函数也多不定喔！不过随着浏览器支援度的提高，一些特殊效果不妨可以使用这些滤镜函数来实现，就不需要仰赖修图软件，也可以省下不少的网站空间和流量。

意见反馈

CSS 教学

基本介绍

CSS 选择器

数值与单位

规则与定义

函数类型

颜色与滤镜

文字与段落

元素容器

背景与阴影

清单与表格

基本排版与定位

Flex 弹性排版

Grid 网格排版

转场与动画

变形、裁切与遮罩

视窗与用户行为

CSS 预处理器

范例效果