最新訊息:Microsoft Edge CSS 濾鏡效果
19592
次閱讀
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 參考
相關主題
WR網頁設計公司
https://www.wr.com.tw