CSS filter 屬性介紹：打造酷炫視覺效果的新手指南

更新日期： 2024 年 11 月 5 日

在網頁設計中，視覺效果是吸引使用者目光的關鍵之一。

CSS 的 filter 屬性是一個強大的工具，可以用來為圖片、文字和其他元素添加各種效果，例如模糊、亮度調整、反轉顏色等。

這篇文章將帶你一步步了解 filter 屬性的基本概念、各種濾鏡功能，以及如何靈活應用這些效果來增強網頁的視覺吸引力。

什麼是 CSS filter 屬性？

filter 屬性可以應用到 HTML 元素上，用來實現多種濾鏡效果。

filter 的值可以是單一效果，也可以多個濾鏡效果的組合，能夠快速創造出生動、個性化的視覺效果。

filter 屬性的基本語法

filter 屬性的語法結構非常簡單：

filter: effect(value);

其中，effect 表示濾鏡的名稱，而 value 則是該濾鏡的強度或參數（例如模糊程度、亮度百分比等）。

如果需要同時應用多個效果，可以用空格分隔，例如：

filter: blur(5px) brightness(120%);

常見的 filter 效果

以下是一些常用的 filter 效果，並附有簡單的範例說明：

blur()：模糊效果

• 用來增加元素的模糊程度，常用於背景圖片或聚焦效果。
• 語法：blur(radius)
• 範例：

img {
    filter: blur(5px);
    /* 將圖片模糊 5px */
}

brightness()：亮度調整

• 用於調整元素的亮度，100% 是預設亮度，低於 100% 會變暗，高於 100% 會變亮。
• 語法：brightness(percentage)
• 範例：

img {
    filter: brightness(150%);
    /* 提升亮度至 150% */
}

contrast()：對比度調整

• 用來增加或降低元素的對比度，100% 為預設對比度。
• 語法：contrast(percentage)
• 範例：

img {
    filter: contrast(80%);
    /* 降低對比度到 80% */
}

grayscale()：灰階效果

• 將元素轉換為黑白效果，0% 表示彩色，100% 表示完全灰階。
• 語法：grayscale(percentage)
• 範例：

img {
    filter: grayscale(100%);
    /* 完全黑白效果 */
}

invert()：顏色反轉

• 反轉元素的顏色，0% 表示正常顏色，100% 表示完全反轉。
• 語法：invert(percentage)
• 範例：

img {
    filter: invert(100%);
    /* 顏色完全反轉 */
}

opacity()：透明度調整

• 調整元素的透明度，0% 表示完全透明，100% 表示完全不透明。
• 語法：opacity(percentage)
• 範例：

img {
    filter: opacity(50%);
    /* 半透明效果 */
}

sepia()：懷舊效果

• 將元素轉換為懷舊的棕黃色調，100% 是完全懷舊效果。
• 語法：sepia(percentage)
• 範例：

img {
    filter: sepia(100%);
    /* 完全懷舊效果 */
}

saturate()：飽和度調整

• 調整元素的色彩飽和度，100% 是正常飽和度，超過 100% 會更鮮豔，低於 100% 則變灰。
• 語法：saturate(percentage)
• 範例：

img {
    filter: saturate(200%);
    /* 色彩更鮮豔 */
}

hue-rotate()：色相旋轉

• 改變元素的色相，範圍為 0deg 到 360deg。
• 語法：hue-rotate(angle)
• 範例：

img {
    filter: hue-rotate(90deg);
    /* 色彩偏藍 */
}

filter 的複合應用

filter 屬性支持同時使用多個濾鏡效果，這樣可以創造出更豐富的視覺效果。將各個濾鏡效果以空格分隔即可。

範例：

img {
  filter: grayscale(100%) brightness(80%) blur(2px); /* 黑白 + 降低亮度 + 模糊 */
}

這個設定會讓圖片呈現黑白效果、略微昏暗並帶有輕微的模糊。

filter 的應用場景

1. 圖片的懸停效果：為圖片增加懸停效果，使其在滑過時呈現模糊、灰階或亮度變化。

   img:hover {
     filter: brightness(120%) saturate(150%);
   }

2. 背景圖的柔化：可以用 blur() 創造背景模糊效果，讓文字更加突出。

   .background {
     filter: blur(5px);
   }

小結

CSS 的 filter 屬性是一個方便而強大的工具，可以在網頁設計中添加各種效果。

從簡單的模糊、亮度調整到色相旋轉，filter 能幫助你輕鬆實現生動的視覺效果。

希望這篇文章讓你對 filter 有更深入的了解，並鼓勵你多多嘗試不同的效果，讓你的網頁設計更加吸引人！