CSS 模糊屬性詳解：filter 與 backdrop-filter

CSS 模糊屬性詳解：filter 和backdrop-filter

導語：
在設計網頁時，我們常常需要一些特效來增加頁面的視覺吸引力。而模糊效果是其中一種常見的特效之一。 CSS 提供了兩種模糊屬性：filter 和 backdrop-filter，它們分別用於對元素內容以及背景內容進行模糊處理。本文將詳細介紹這兩個屬性，並提供一些具體的程式碼範例。

一、filter 屬性

filter 屬性是用來模糊元素內容的處理。它可以實現多種不同的效果，包括高斯模糊、亮度調整、對比調整等。以下是一些常用的 filter 屬性值及其效果。

1. 高斯模糊（blur）：透過此屬性可以為元素添加模糊效果。數值越大，模糊程度越高。

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

2. 亮度調整（brightness）：透過此屬性可以調整元素的亮度。值小於 1 會變暗，值大於 1 會變亮。

.brightness {
  filter: brightness(0.5);
}

3. 對比調整（contrast）：透過此屬性可以調整元素的對比。值小於 1 會降低對比度，數值大於 1 會增加對比。

.contrast {
  filter: contrast(2);
}

4. 反色效果（invert）：透過此屬性可以為元素添加反色效果。

.invert {
  filter: invert(100%);
}

5. 色相旋轉（hue-rotate）：透過此屬性可以旋轉元素的色相。

.hue-rotate {
  filter: hue-rotate(90deg);
}

二、backdrop-filter 屬性

backdrop-filter 屬性是用來模糊的元素的背景內容。它的用法與 filter 屬性類似，但作用於元素的背景而不是元素本身的內容。以下是一些常用的 backdrop-filter 屬性值及其效果。

1. 高斯模糊（blur）：透過此屬性可以為元素的背景添加模糊效果。數值越大，模糊程度越高。

.backdrop-blur {
  backdrop-filter: blur(5px);
}

2. 亮度調整（brightness）：透過此屬性可以調整元素的背景亮度。值小於 1 會變暗，值大於 1 會變亮。

.backdrop-brightness {
  backdrop-filter: brightness(0.5);
}

3. 對比調整（contrast）：透過此屬性可以調整元素的背景對比。值小於 1 會降低對比度，數值大於 1 會增加對比。

.backdrop-contrast {
  backdrop-filter: contrast(2);
}

4. 反色效果（invert）：透過此屬性可以為元素的背景加上反色效果。

.backdrop-invert {
  backdrop-filter: invert(100%);
}

5. 色相旋轉（hue-rotate）：透過此屬性可以旋轉元素的背景色相。

.backdrop-hue-rotate {
  backdrop-filter: hue-rotate(90deg);
}

結語：
CSS 的 filter 和 backdrop-filter 屬性為我們提供了豐富的模糊效果選擇，使得網頁的設計更加豐富多彩。透過合理的運用這些屬性，可以讓頁面呈現出更酷炫的效果。但要注意的是，在使用這些屬性時，不同的瀏覽器可能會有相容性問題，所以在實際使用中需要進行相容性測試，以確保效果一致性。

參考連結：

• [MDN Web Docs: filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
• [MDN Web Docs: backdrop-filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)

以上是CSS 模糊屬性詳解：filter 與 backdrop-filter的詳細內容。更多資訊請關注PHP中文網其他相關文章！