Microsoft Edge CSS 濾鏡效果

日期 2014-12-01 | 新聞類別： 最新訊息

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> 越大，模糊範圍越廣。

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

CSS


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

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

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

CSS


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

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

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

CSS


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

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

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

CSS


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

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

使用多個濾鏡

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

CSS


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

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

API 參考

CSS Filter Effects