CSS 過濾器產生器
創建和視覺化自定義 CSS 影像過濾器
Preview
CSS Code
過濾器：無;
過濾器控制
0px
100%
100%
0%
0deg
0%
100%
100%
0%
熱門篩選條件
Vintage
Neon Glow
Polaroid
老爺片
數字藝術
如何使用 CSS 過濾器
什麼是 CSS 過濾器？
CSS 濾鏡允許您將模糊或顏色變化等圖形效果應用於元素。它們通常用於圖像、背景和邊框。
濾鏡可用於創建視覺效果、增強圖像或創建獨特的設計元素，而無需外部圖像編輯工具。
支援的 CSS 過濾器屬性
-
blur()- 對元素應用高斯模糊。 -
brightness()- 調整元素的亮度。 -
contrast()- 調整元素的對比度。 -
grayscale()- 將元素轉換為灰度。 -
hue-rotate()- 將色相旋轉應用於元素。 -
invert()- 反轉元素的顏色。 -
opacity()- 調整元素的不透明度。 -
saturate()- 使元素飽和或去飽和。 -
sepia()- 將元素轉換為棕褐色。
如何應用濾鏡
使用此工具生成的 CSS 代碼，您可以將過濾器應用於任何 HTML 元素。方法如下：
1. 選擇元素
選擇要應用過濾器的 HTML 元素。這可以是圖像、背景或任何其他元素。
2. 添加類或 ID
如果元素還沒有類或ID，請添加一個，以便更輕鬆地使用 CSS 進行定位。
3. 應用濾鏡
使用 CSSfilter屬性或內聯樣式來應用生成的篩檢程式。
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. 組合多個過濾器
您可以通過一個接一個地列出多個篩選函數來組合它們，並用空格分隔。
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);瀏覽器相容性
CSS 過濾器在現代瀏覽器（包括 Chrome、Firefox、Safari、Edge 和 Opera）中得到廣泛支援。但是，Internet Explorer 等較舊的瀏覽器不支持它們。
Chrome
Firefox
Safari
Edge
IE 11+ (partial)