搜尋

CSS 函式 ( 影像濾鏡 )

過去 CSS 要使用模糊、對比度、亮度等影像濾鏡函式時，需要加上「-webkit-」開頭識別名稱，但現在隨著瀏覽器的進步，只要單純使用濾鏡名稱就能套用樣式，例如 blur()、brightness()、contrast()、invert()、drop-shadow()、opacity()、grayscale() 等，這篇教學會介紹 CSS 的影像濾鏡函式，透過這些好用的濾鏡，創造出各種饒富創意的網頁特效。

CSS 教學 - CSS 函式 ( 影像濾鏡 )

「影像濾鏡」的 CSS 函式

下方列出「影像濾鏡」類型的 CSS 函式 ( 目前除了 IE，所有瀏覽器都支援 )：

注意，使用濾鏡需要搭配 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 開始使用 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 排列網格項目