CSS濾鏡

如何使用CSS的filter屬性

濾鏡允許我們對元素進行操作。

你通常可以在Photoshop或其他圖片編輯軟件中進行的操作，像是更改透明度、亮度等等。

使用filter屬性。這是一個對圖片應用的例子，但這個屬性可以用於任何元素：

1
2
3

img {
 filter: <something>;
}

你可以在這裡使用各種不同的值：

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()
saturate()
url()

注意每個選項後面的括號，因為它們都需要一個參數。

例如：

1
2
3

img {
 filter: opacity(0.5);
}

這意味著圖片將是50%透明，因為opacity()接受介於0到1之間的值，或者是一個百分比。

你也可以同時應用多個濾鏡：

1
2
3

img {
 filter: opacity(0.5) blur(2px);
}

現在讓我們詳細介紹每個濾鏡。

`blur()`

對元素的內容進行模糊處理。你需要傳遞一個值，以px、em或rem表示，用於確定模糊半徑。

例子：

1
2
3

img {
 filter: blur(4px);
}

`opacity()`

opacity()接受介於0到1之間的值，或者是一個百分比，並根據它來確定圖片的透明度。

0或0%表示完全透明。
1、100%或更高表示完全可見。

例子：

1
2
3

img {
 filter: opacity(0.5);
}

CSS還有一個opacity屬性，但filter可以根據實現方式進行硬件加速，所以應該優先使用filter。

`drop-shadow()`

drop-shadow()在元素後面顯示一個陰影，該陰影遵循alpha通道。這意味著如果你有一個透明的圖片，在圖片的形狀上應用陰影，而不是在整個圖片框上應用陰影。如果圖片沒有alpha通道，陰影將應用於整個圖片框。

它接受至少2個參數，最多5個：

偏移X設置水平偏移量。可以是負數。
偏移Y設置垂直偏移量。可以是負數。
模糊半徑，可選，設置陰影的模糊半徑。它的默認值為0，表示不模糊。
擴散半徑，可選，設置擴散半徑。以px、rem或em表示。
顏色，可選，設置陰影的顏色。

你可以只設置顏色而不設置擴散半徑或模糊半徑。CSS會將該值理解為顏色而不是長度值。

例子：

1
2
3

img {
 filter: drop-shadow(10px 10px 5px orange);
}

1
2
3

img {
 filter: drop-shadow(10px 10px orange);
}

1
2
3

img {
 filter: drop-shadow(10px 10px 5px 5px #333);
}

`grayscale()`

使元素變為灰色。

你可以傳遞一個介於0到1之間的值，或者在0%到100%之間的值，其中1和100%表示完全灰色，0或0%表示圖片不受影響，原始顏色保持不變。

例子：

1
2
3

img {
 filter: grayscale(50%);
}

`sepia()`

使元素呈現棕褐色。

你可以傳遞一個介於0到1之間的值，或者在0%到100%之間的值，其中1和100%表示完全棕褐色，0或0%表示圖片不受影響，原始顏色保持不變。

例子：

1
2
3

img {
 filter: sepia(50%);
}

`invert()`

反轉元素的顏色。反轉一個顏色意味著在HSL顏色輪中尋找一個色彩的相反色。如果你不知道這意味著什麼，只需在Google中搜索“color wheel”。例如，黃色的相對色是藍色，紅色的相對色是青色。每一種顏色都有一個相對色。

你傳遞一個介於0到1之間或0%到100%之間的數字，來確定反轉的程度。1或100%表示完全反轉，0或0%表示不反轉。

0.5或50%始終呈現50%的灰色，因為你永遠在輪的中間。

例子：

1
2
3

img {
 filter: invert(50%);
}

`hue-rotate()`

HSL顏色輪以度數表示。使用hue-rotate()，你可以使用正或負旋轉角度旋轉顏色。

此函數接受一個deg值。

例子：

1
2
3

img {
 filter: hue-rotate(90deg);
}

`brightness()`

改變元素的亮度。

0或0%得到一個全黑的元素。
1或100%得到一張未改變的圖片。

大於1或100%的值使圖片變得更亮，直到成為全白元素。

例子：

1
2
3

img {
 filter: brightness(50%);
}

`contrast()`

改變元素的對比度。

0或0%得到一個全灰的元素。
1或100%得到一張未改變的圖片。

大於1或100%的值給予更多對比度。

例子：

1
2
3

img {
 filter: contrast(150%);
}

`saturate()`

改變元素的飽和度。

0或0%得到一個完全灰度的元素（飽和度降低）。
1或100%得到一張未改變的圖片。

大於1或100%的值給予更多飽和度。

例子：

1
2
3

img {
 filter: saturate();
}

`url()`

此濾鏡允許應用在一個SVG文件中定義的濾鏡。你需要指定SVG文件的位置。

例子：

1
2
3

img {
 filter: url(filter.svg);
}

本書不涵蓋SVG濾鏡，但你可以在Smashing Magazine的文章中閱讀更多：https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

tags: [“CSS”, “filters”, “web development”]