最新訊息

Microsoft Edge CSS 濾鏡效果

作者:網管 於 2014-12-01
17123
次閱讀

Microsoft Edge 引進對 CSS 濾鏡效果的支援,做為濾鏡效果模組層級 1 W3C 規格的一部分。 CSS 濾鏡能讓您在瀏覽器中直接操縱圖形,與 Adobe Photoshop 這類應用程式的使用方式類似。

Microsoft Edge CSS 濾鏡效果

套用濾鏡

若要使用 CSS濾鏡效果,請將 filter 屬性套用到您網站上的可見元素。

 

使用此語法,您可指定要套用到影像的濾鏡函式。


filter: none |  <filter-function-list> 
<filter-function-list> = [<filter-function]
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()>| <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

例如,模糊濾鏡可將高斯模糊套用到元素上。下面範例中的值 2px 表示 <length>,可指定高斯函式標準差之值的半徑。<length> 越大,模糊範圍越廣。

在上方影像設定模糊會產生下列:


.image {
  filter: blur(2px);
}

 

亮度濾鏡會將線性乘數套用至元素,讓元素變亮或變暗。將值設為 100% 元素會維持不變,設為 0% 則會讓元素顯示完全黑色。 您可以指定大於 100% 的值,影像看起來將會更明亮。

將亮度 filter 套用至相同的影像會產生下列:


.image {
   filter: brightness(250%);
}

 

灰階濾鏡會將元素轉換為灰階。將值設為 100% 會讓元素完全灰階,設定為 0% 元素則會維持不變。

將灰階 filter 套用至影像會產生下列:


.image {
   filter: grayscale(80%);
}

 

反轉濾鏡會反轉元素中的取樣。您所指定的值會定義轉換的比例。將值設為 100% 會完全反轉影像,設定為 0% 元素則會維持不變。您可以指定大於 100% 的值。

將反轉 filter 套用至影像會產生下列:


.image {
   filter: invert(75deg);
}

 

這些範例只是少數您能套用至網站元素的濾鏡。 如需完整的濾鏡清單,請參閱 filter 屬性頁。

使用多個濾鏡

您可以透過在 <filter-functions> 之間新增空間,將多個濾鏡效果套用到元素上。<filter-functions> 將會以您列出的順序套用至該元素。例如,下列程式碼片段在一個影像上使用了 復古色調、色相分離、飽和度,以及陰影濾鏡。


.image {
   filter: sepia(55%) hue-rotate(20deg) saturate(185%) drop-shadow(2px 2px 5px gray);
}

 

這些範例只是少數您能套用至網站元素的濾鏡。 如需完整的濾鏡清單與其定義,請參閱 filter 屬性頁。

API 參考

CSS Filter Effects

相關主題

SVG 濾鏡效果