CSS 函式 ( 影像濾鏡 )
過去 CSS 要使用模糊、對比度、亮度等影像濾鏡函式時，需要加上「-webkit-」開頭識別名稱，但現在隨著瀏覽器的進步，只要單純使用濾鏡名稱就能套用樣式，例如 blur()、brightness()、contrast()、invert()、drop-shadow()、opacity()、grayscale() 等，這篇教學會介紹 CSS 的影像濾鏡函式，透過這些好用的濾鏡，創造出各種饒富創意的網頁特效。
「影像濾鏡」的 CSS 函式
下方列出「影像濾鏡」類型的 CSS 函式 ( 目前除了 IE，所有瀏覽器都支援 )：
注意，使用濾鏡需要搭配
filter樣式屬性，且濾鏡效果會套用到整個元素裡，不論是邊框還是背景色都會一併套用。
| 數學計算函式 | 說明 |
|---|---|
| blur() | 高斯模糊。 |
| brightness() | 亮度。 |
| contrast() | 對比度。 |
| drop-shadow() | 陰影。 |
| grayscale() | 灰階效果。 |
| invert() | 負片效果。 |
| sepia() | 棕褐色效果。 |
| saturate() | 飽和度 ( 彩度 )。 |
| hue-rotate() | 色相。 |
| opacity() | 透明度。 |
blur()
「blur()」是「高斯模糊」CSS 函式，使用後會替元素加上高斯模糊的效果，只有一個「模糊半徑」的參數，參數使用長度單位，下方的範例執行後，會將 HTML 的元素分別套用不同的模糊效果。
<!-- 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>
brightness()
「brightness()」是「亮度」CSS 函式，使用後可以調整元素色彩的亮度，只有一個無單位的「數字」參數，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設亮度為 1 或 100%，設定 0 或 0% 為最暗，設定超過 1 或 100% 則會變亮，下方的範例執行後，會將 HTML 的元素分別套用不同的亮度。
<!-- 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>
contrast()
「contrast()」是「對比度」CSS 函式，使用後可以調整元素色彩的對比度，只有一個無單位的「數字」參數，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設對比度為 1 或 100%，設定 0 或 0% 為沒有對比 ( 灰色一片 )，設定超過 1 或 100% 則對比度會增加，下方的範例執行後，會將 HTML 的元素分別套用不同的對比度。
<!-- 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>
drop-shadow()
「drop-shadow()」是「陰影」CSS 函式，使用後會替元素加上陰影，具有必填的「陰影 x、y 位置」參數和選填的「陰影顏色、陰影模糊半徑」參數，參數說明如下：
| 陰影參數 | 數值 | 說明 |
|---|---|---|
| x | 有距離單位的整數或浮點數 | 陰影離元素的水平距離，右為正，左為負。 |
| y | 有距離單位的整數或浮點數 | 陰影離元素的垂直距離，下為正，上為負。 |
| r | 有距離單位的整數或浮點數 | 陰影的模糊程度。 |
| color | 顏色單位 | 陰影的顏色，預設使用元素本身的顏色設定，如果元素是圖片就是黑色。 |
下方範例會呈現不同的陰影效果，值得一提的是如果將 drop-shadow() 套用到「背景透明」的圖片 ( 例如 png 格式圖片 )，圖片的透明區域並不會有陰影，可以做出很完美的陰影效果。
注意，陰影的階層 ( 圖層 ) 和元素相同，在上方元素的陰影會覆蓋下方的元素。
<!-- 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>
grayscale()
「grayscale()」是「灰階效果」CSS 函式，使用後會將元素的顏色轉換成灰階的黑白色彩，只有一個無單位的「數字」參數，範圍「0～1」，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設值為 0 或 0% 表示呈現原本色彩，設定 1 或 100% 則是完全灰階，下方的範例執行後，會將 HTML 的元素分別套用不同的灰階效果。
<!-- 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>
invert()
「grayscale()」是「負片效果」CSS 函式，使用後會將元素的顏色反轉為負片效果，只有一個無單位的「數字」參數，範圍「0～1」，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設值為 0 或 0% 表示呈現原本色彩，設定 1 或 100% 則是完全負片，如果設定 0.5 或 50% 則會是顏色平均的灰色，下方的範例執行後，會將 HTML 的元素分別套用不同的負片效果。
<!-- 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>
sepia()
「sepia()」是「棕褐色效果」CSS 函式，使用後會將元素色彩轉換成棕褐色，只有一個無單位的「數字」參數，範圍「0～1」，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設值為 0 或 0% 表示呈現原本色彩，設定 1 或 100% 則是完全棕褐色，下方的範例執行後，會將 HTML 的元素分別套用不同的棕褐色效果。
<!-- 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>
saturate()
「saturate()」是「飽和度、彩度」CSS 函式，使用後會調整元素色彩的飽和度，只有一個無單位的「數字」參數，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，預設飽和度為 1 或 100%，設定 0 或 0% 為不飽和 ( 灰階狀態 )，設定超過 1 或 100% 則會變得更飽和，下方的範例執行後，會將 HTML 的元素分別套用不同的飽和度。
<!-- 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>
hue-rotate()
「hue-rotate()」是「色相」CSS 函式，使用後會根據色相環的角度改變元素色彩，使用一個單位是角度的「數字」參數，數值範圍 0deg～359deg ( 可以超過或負值 )，0deg 為預設顏色，下方的範例執行後，會將 HTML 的元素修改成不同的色相。
<!-- 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>
opacity()
「opacity()」是「透明度」CSS 函式，使用後會調整元素色彩的飽和度，只有一個無單位的「數字」參數，範圍 0～1，亦可將數字對應到百分比，例如「0=0%、0.55=55%、1=100%」，*預設為 1 或 100% 表示不透明，設定 0 或 0% 為全透明，下方的範例執行後，會將 HTML 的元素分別套用不同的透明度。
<!-- 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 的「影像濾鏡」函式相當好用，但由於早期 IE 並不支援，所以實際應用的廣泛程度並沒有很高，但如果是一些具有大量影像效果的網頁，或許就是大量應用了 CSS 影像濾鏡函式也多不定喔！不過隨著瀏覽器支援度的提高，一些特殊效果不妨可以使用這些濾鏡函式來實現，就不需要仰賴修圖軟體，也可以省下不少的網站空間和流量。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～