CSS3 濾鏡

Created: October-16, 2018

CSS3 濾鏡效果提供了一種將視覺效果應用於影象的簡便方法。

瞭解 CSS3 濾鏡功能

在本章中，我們將討論 CSS3 中引入的濾鏡效果，你可以使用它對圖形元素來執行視覺效果操作，如模糊，平衡對比度或亮度，顏色飽和度等，然後將其繪製到網頁上。

可以使用 CSS3 filter 屬性將濾鏡效果應用於元素，該屬性按照提供的順序接受一個或多個濾鏡功能。

filter: blur()  |  contrast()  |  grayscale()  |  invert()  |  sepia()  |  url()  ;

警告： 任何版本的 Internet Explorer 當前都不支援 CSS3 濾鏡效果。較早版本的 IE 支援非標準 filter 屬性來建立不透明效果，但此功能已被棄用。

模糊效果

像 Photoshop 的高斯模糊效果可以使用 blur() 函式來應用於元素。此函式接受 CSS 長度值作為定義模糊半徑的引數。值越大，模糊越多。如果未提供引數，則使用值 0 。

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

- 上面示例的輸出將如下所示：

設定影象亮度

brightness() 功能可用於設定影象的亮度。值 0% 將建立一個完全黑色的影象。與此相對，值 100% 或 1 使得影象保持不變。其他值是效果的線性係數。

你還可以將亮度設定為高於 100%，從而使影象更亮。如果缺少 amount 引數，則使用值 1 。不允許使用負值。

img.bright {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}

- 上面示例的輸出將如下所示：

注意： 採用以百分號表示的值的濾鏡函式（例如 75%）也接受以十進位制表示的值（如， 0.75）。如果該值無效，則函式返回 none ，則不會應用濾鏡效果。

調整影象對比度

contrast() 功能用於調整影象的對比度。值 0% 將建立一個完全黑色的影象。與此相對，值 100% 或 1 使得影象保持不變。還允許超過 100% 的值，其提供具有較低對比度的結果。如果缺少或省略 amount 引數， 1 則使用值。

img.bright {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
img.dim {
    -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
    filter: contrast(50%);
}

- 上面示例的輸出將如下所示：

向影象新增陰影

你可以使用 drop-shadow() 功能將 Photoshop 的陰影效果應用於影象。此功能類似於 box-shadow 屬性。

img {
    -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(4px 4px 10px orange);
}

- 上面示例的輸出將如下所示：

注意： drop-shadow() 函式的第一個和第二個引數分別指定陰影的水平和垂直偏移，而第三個引數指定陰影顏色，最後一個引數指定陰影顏色，就像屬性 box-shadow 一樣，只有一個例外，不允許使用關鍵字 inset。

將影象轉換為灰度

可以使用 grayscale() 功能將影象轉換為灰度。值 100% 是完全灰度的。值 0% 保持影象不變。 0% 和之間的值 100% 是效果的線性係數。如果缺少 amount 引數，則使用值 0。

img.complete-gray {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

- 上面示例的輸出將如下所示：

在影象上應用色調旋轉

hue-rotate() 功能在影象上應用色調旋轉。傳遞的引數定義了將調整影象樣本的色環周圍的度數。值 0deg 保持影象不變。如果缺少 angle 引數，則使用值 0deg。沒有最大值限制，超過 360deg 的值將被限制到 360deg。

img.hue-normal {
    -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(150deg);
}
img.hue-wrap {
    -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(480deg);
}

- 上面示例的輸出將如下所示：

反轉效應

像 Photoshop 這樣的反轉效果可以使用 invert() 功能。值 100% 或 1 完全反轉。值 0% 保持輸入不變。 0% 和之間的值 100% 是效果的線性係數。如果缺少 amount 引數，則使用值 0。不允許使用負值。

img.partially-inverted {
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}
img.fully-inverted {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

- 上面示例的輸出將如下所示：

將不透明度應用於影象

opacity() 功能可用於對影象應用透明度。值 0% 是完全透明的。值 100% 或 1 保持不變。 0% 和 100% 之間的值是效果的線性係數。如果缺少 amount 引數，則使用值 1。此功能類似於 opacity 屬性。

img {
    -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
    filter: opacity(80%);
}

- 上面示例的輸出將如下所示：

將棕褐色效應應用於影象

sepia() 功能將影象轉換為棕褐色。價值 100% 或 1 完全是棕褐色。值 0% 保持影象不變。 0% 和之間的值 100% 是效果的線性係數。如果缺少 amount 引數，則使用值 0。

img.complete-sepia {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}
img.partial-sepia {
    -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
    filter: sepia(30%);
}

- 上面示例的輸出將如下所示：

提示： 從照片來看，棕褐色調是一種專門的處理方法，可以使黑白照片的色調更加溫暖（紅褐色），從而提高其檔案質量。

調整影象的飽和度

saturate() 功能可用於調整影象的飽和度。值 0% 完全不飽和。值 100% 保持影象不變。其他值是效果的線性係數。超過 100% 的數值也是允許的，提供超飽和的結果。如果缺少 amount 引數，則使用值 1。

img.un-saturated {
    -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
    filter: saturate(0%);
}
img.super-saturated {
    -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
    filter: saturate(200%);
}

- 上面示例的輸出將如下所示：

注意： 該 url() 函式指定對特定濾鏡元素的濾鏡引用。例如， url(commonfilters.svg#foo) 。如果對不存在的元素的濾鏡引用或引用的元素不是濾鏡元素，則忽略整個濾鏡鏈。沒有濾鏡應用於元素。