紀錄工作經驗、相關知識,解決技術相關問題。

CSS

CSS Filters 濾鏡效果

CSS Filter 濾鏡效果

CSS Filter 濾鏡效果

前端 HTML 網頁製作上,CSS 濾鏡效果是常常會用到的功能之一,CSS 濾鏡效果與法使用 Filters,共有10種可以選用。

CSS 濾鏡 Filters 常常被用來處理相同的區塊或圖片,需要進行不同效果的呈現的時候,這裡舉幾個最常見的例子,一個按鈕的 hover 效果、區塊 or 圖片想呈現成灰階、想進行霧化處裡,都會用到 CSS 濾鏡 Filters。

如何使用 CSS Filters 濾鏡效果

使用 CSS Filters 濾鏡,語法為 –webkit-filter,假設我們要使用 CSS Filters 濾鏡,讓CSS 使圖片模糊、霧化圖片,語法如下 :

.css-filters-img {
  filter: blur(5px);
  -webkit-filter: blur(5px); // 舊語法
}

CSS Filters 濾鏡效果可以同時使用多個,效果與效果間用空白隔開即可,例如我們要灰階與模糊,

.css-filters-img {
  filter</span>: blur(5px) grayscale(1);
  -webkit-filter: blur(5px) grayscale(1); // 舊語法
}

CSS Filters 濾鏡效果

blur 模糊

讓圖片或元素產生模糊效果,單位為常用的 px, em , rem …等。

.css-filters-img {
  filter: blur(5px);
  -webkit-filter: blur(5px); // 舊語法
}

brightness 亮度

讓圖片或元素產增加亮度,值介於 0~1之間(0%~100%)。

.css-filters-img {
  filter: brightness(.3);
  -webkit-filter: brightness(.3); // 舊語法
}

brightness(.3)

brightness(.6)

contrast 對比

讓圖片或元素產增加亮度,100% 為原本對筆值(顏色不變),小於 100% 為減少對比,大於100% 則增加對比。

.css-filters-img {
filter: contrast(300%);
-webkit-filter: contrast(300%); // 舊語法
}

drop-shadow 下拉陰影

幫圖片或元素加上陰影,與 box-shadow 不同,drop-shadow 可以針對透明圖內不透明的區域加上陰影,而 box-shadow 只能針對該物件矩形加上陰影。

.css-filters-img {
filter: drop-shadow(5px 10px 15px #000);
-webkit-filter: drop-shadow(5px 10px 15px #000); // 舊語法
}

grayscale 灰階

幫圖片或元素轉換為黑白色調,值介於0~1之間(0%~100%),可自行調整灰階比例,0 (0%) 表示維持不變,1代表轉灰階。

.css-filters-img {
filter: grayscale(1);
-webkit-filter: grayscale(1); // 舊語法
}

grayscal(0.5)

grayscal(1)

hue-rotate 色相旋轉

將圖片中的顏色色相,依據色相圈進行旋轉,值介於 0~360 deg。

.css-filters-img {
filter: hue-rotate(45deg);
-webkit-filter: hue-rotate(45deg); // 舊語法
}

hue-rotate(90deg)

hue-rotate(180deg)

hue-rotate(250deg)

invert 負片

將圖片中的顏色轉成類似相片負片效果,值介於0~1之間(0~100%)。

.css-filters-img {
filter: invert(1);
-webkit-filter: invert(1); // 舊語法
}

invert(.3)

invert(.7)

invert(1)

opacity 不透明

調整圖片或元素的不透明度,值介於0~1之間(0%~100%),1 (100%)為不透明,0 (0%)為透明。

.css-filters-img {
filter: opacity(.5);
-webkit-filter: opacity(.5); // 舊語法
}

saturate 飽和

調整圖片或元素的顏色飽和度,值介於0~1之間(0%~100%),小於 100% 為減少飽和,大於100% 則增加飽和。

.css-filters-img {
filter: saturate(1.5);
-webkit-filter: saturate(1.5); // 舊語法
}

saturate(.5)

saturate(1)

saturate(2)

sepia 懷舊

會再要調整的圖片或元素上,覆蓋一層泛黃色濾鏡,模擬出復古還舊的風格,值介於0~1之間(0%~100%)。

.css-filters-img {
filter: sepia(.5);
-webkit-filter: sepia(.5); // 舊語法
}

saturate(.5)

saturate(1)

使用 CSS Filters 濾鏡會有三個優點:

重複利用率高圖片 or 區塊可達成較高的重複利用
調整與維護容易減少修改圖片的數量、時間,後續調整與維護更加容易
預覽順暢可效減圖片數量,使網頁載入更加順暢
CSS 濾鏡 Filters 優點

瀏覽器兼容 (Browser compatibility)

使用CSS Filters 濾鏡效果時,你需要注意瀏覽器版本的兼容性。

PC Browser compatibilityChromeEdgeFirefoxInterment ExplorerOperaSafari
Filter531235NO409.1
On SVG elementNONO35NONONO
CSS Filter – PC Browser compatibility
Mobile Browser compatibilityWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
Filter535335419.36.0
On SVG elementNONO35NONONO
CSS Filter – Mobile Browser compatibility

資料來源 : MDN CSS Filter

發表迴響