Css filter 屬性看起來像一個樣式捷徑:一行將照片變成黑白、模糊背景或加熱縮圖,不涉及圖像編輯器。就是這樣。它還會改變瀏覽器定位和分層其應用元素的方式,這就是為什麼為懸停效果添加的過濾器可以悄悄地將下拉式分解三個組件。
本指南涵蓋了每個濾波器功能對像素值的作用、為什麼相同功能以不同的順序產生不同的影像、濾波器在佈局和動畫中的行為方式以及它們消耗效能的位置。它使用免費 CSS 濾波器產生器 要建立聲明,但每個範例都是普通的 CSS,您可以貼上到任何地方。
TL;DR: Css
filter屬性將模糊、亮度、對比、灰階、棕褐色、飽和、反轉、色調旋轉和不透明度等圖形效果按照函數寫入的順序應用於元素及其內部的所有內容。除此之外的任何值none還創建一個堆疊上下文並成為固定且絕對定位的子項的包含區塊,這是 " 的常見原因;我的模式卡在卡片內" Toolz CSS 過濾器產生器使用滑桿和即時預覽建立聲明,僅寫入您變更的功能,並運行客戶端、免費、無需註冊。
CSS 過濾器屬性是什麼？
CSS 過濾器屬性在元素繪製到頁面之前將其套用到元素。效果涵蓋元素'整個渲染:其背景、邊框、文字、圖像和子元素。它是在 W3C 中定義的 濾波器效果模組等級 1 並在目前所有瀏覽器中支援;這 MDN 參考過濾器 列出相容性詳細資訊。
聲明是空間分隔的濾波器函數清單:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
這些函數從左到右運行。每個都以前一個的輸出作為輸入,這是理解為什麼順序重要的關鍵。
過濾器不會修改圖像檔案。瀏覽器每次繪製時都會套用它們,因此原始內容保持不變,您可以使用一行 CSS 更改或刪除效果。
每個濾波器功能有什麼作用?
每個函數都有一個恆等值,使元素保持不變。 Toolz 產生器使用它來保持輸出較短:CSS 中省略其恆等值處剩餘的任何函數。
| 功能 | 它做什麼 | 身份 | 產生器滑塊範圍 |
|---|---|---|---|
blur() |
給定半徑的高斯模糊 | 0px |
0 到 20px |
brightness() |
組合每個顏色通道 | 100% |
0%至200% |
contrast() |
將通道推離或推向中灰色 | 100% |
0%至200% |
saturate() |
增加或減少顏色強度 | 100% |
0%至200% |
grayscale() |
趨向於等亮度的灰色 | 0% |
0%至100% |
sepia() |
融入溫暖的棕色色調 | 0% |
0%至100% |
invert() |
將每個通道翻轉到相反的方向 | 0% |
0%至100% |
hue-rotate() |
圍繞色輪旋轉顏色 | 0deg |
0 至 360 度 |
opacity() |
使元素更加透明 | 100% |
0%至100% |
該規範允許超出其中一些範圍的值,例如 brightness(300%). 滑桿涵蓋了可用於照片樣式調整的範圍;您可以手動在 CSS 中鍵入更大的值。
該規範也定義了 drop-shadow(),生成器不包括。不同 box-shadow, drop-shadow() 遵循透明圖像的可見形狀,例如 PNG 圖標,而不是元素's 矩形框。對於矩形陰影, 盒子陰影指南 涵蓋更靈活的屬性。
濾色器如何改變像素值?
大多數濾色器在紅色、綠色和藍色通道上都是簡單的算術,每個濾色器都被視為從0 到1 的數字。濾鏡效果規範將每個濾色器定義為一個公式或3 x 3 矩陣。透過處理幾種顏色,它們變得可預測。
亮度(150%) 將每個通道乘以 1.5。 rgb 的中灰色 (100, 100, 100) 變為 rgb (150, 150, 150)。超過 255 的值會被剪掉,這就是為什麼高亮度會將高光沖刷成純白色的原因。
對比度(200%) 將(值 - 0.5)× 2 + 0.5 應用於每個通道。 0.25(約 64)處的深灰色變為 (0.25 - 0.5) × 2 + 0.5 = 0,黑色。 0.75 處的淺灰色變為 1.0,白色。一切都從中間展開。
灰階(100%) 根據亮度,用灰色替換每個像素,紅色使用 0.2126,綠色使用 0.7152,藍色使用 0.0722 的權重。純紅色,rgb (255, 0, 0),變成 0.2126 × 255 = 約 54,因此 rgb (54, 54, 54)。純綠色變成淺得多的灰色,約為 182。這就是為什麼灰階轉換保留了綠色比紅色更亮的感覺。
棕褐色(100%) 將通道與熱加權係數混合。對於紅色輸出,公式為 0.393R + 0.769G + 0.189B。白色以 (1, 1, 1) 形式出現,結果大致為 (1.35, 1.20, 0.94),夾到 rgb (255, 255, 239):白色變成淡奶油色。
這些數字來自直接應用規範's公式。在螢幕上,舍入和色彩管理可以將結果移動一兩個單位。
為什麼濾波器函數的順序會改變結果?
過濾器按順序應用,因此每個函數都作用於前一個函數's輸出。當函數刪除資訊(例如灰階刪除顏色)時,在其之後運行的任何內容都更少可使用。
取純藍色、rgb (0, 0, 255),並在兩個訂單中以 100% 的比例塗抹灰度和棕褐色。
filter: grayscale(100%) sepia(100%);
- 首先是灰階:藍色的亮度為 0.0722,因此每個通道上的像素變成 0.0722 的深灰色,大約為 rgb (18, 18, 18)。
- 棕褐色第二:紅色變為0.0722 × (0.393 + 0.769 + 0.189) = 0.0975,綠色變為0.0722 × 1.203 = 0.0869,藍色變為0.0722 × 0.937 = 0.0677。
- 結果:大約 rgb(25、22、17),非常深的暖棕色。
filter: sepia(100%) grayscale(100%);
- 棕褐色第一:紅色變為0.189,綠色變為0.168,藍色變為0.131,深棕色。
- 灰階秒:亮度為 0.2126 × 0.189 + 0.7152 × 0.168 + 0.0722 × 0.131 = 0.170。
- 結果:大約 rgb(43、43、43),中性灰色,完全沒有色調。
相同的兩個函數,不同的順序,一個結果被調色,而另一個結果沒有被調色。一般規則:如果您想要後面的函數來調色結果,請先放置顏色刪除函數,如果您想要中性最終圖像,請最後放置顏色刪除函數。
生成器總是以一個固定的順序寫入函數:模糊、亮度、對比、飽和、灰階、棕褐色、反轉、色調旋轉、不透明度。因此,灰階總是出現在棕褐色之前,這會給出色調版本。如果您需要不同的順序,請複製 CSS 並手動重新排列函數。
預設會產生什麼?
生成器在 Vintage 預設上開啟。這些是每個預設所寫的確切聲明:
| 預設 | 產生的css |
|---|---|
| 沒有 | filter: none; |
| 灰階 | filter: grayscale(100%); |
| 復古 | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| 溫暖的 | filter: brightness(105%) saturate(140%) sepia(25%); |
| 涼爽的 | filter: saturate(120%) hue-rotate(200deg); |
| 戲劇性的 | filter: brightness(90%) contrast(150%) saturate(120%); |
| 褪色了 | filter: brightness(110%) saturate(80%) opacity(80%); |
| 反轉 | filter: invert(100%); |
| 模糊 | filter: blur(4px); |
預設是起點。點擊"熱",然後將"模糊"拖曳到 2px,輸出變為 filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);。 按一下「無」或重置,它會返回 filter: none;.
Cool 預設比其名稱所暗示的要強:200 度色調旋轉使橙色向藍色移動,藍色向橙色移動。它的讀法是 "酷&引用;在溫暖的照片上以及在其他一切上的嚴重色彩變化。
預覽是藍色、橙色和綠色梯度的固定樣本,有一些形狀,而不是上傳。它顯示每個函數如何移動顏色、對比度和模糊,但始終在真實圖像上測試複製的 CSS,因為平坦梯度的濾鏡在膚色上可能看起來渾濁。
如何使用產生器建立濾波器?
- 打開 濾波器 CSS 產生器. 從復古開始。
- 選擇最接近您想要的外觀的預設,或按一下「無」以從無過濾器開始。
- 拖曳滑桿。預覽版會在您移動時更新,生成的 CSS 系列也會隨之更新。
- 點擊複製 CSS 以輸入完整內容
filter: ...;剪貼簿上的聲明。 - 將其貼到圖像或元素的選擇器上,然後在真實頁面中檢查。
輸出中僅出現更改的功能,因此將亮度移回 100% 即可刪除 brightness() 從隊伍中而不是離開 brightness(100%) 後面。
為什麼過濾器會破壞固定且絕對定位的元素?
因為任何 filter 除了 none 使該元素成為其絕對和固定位置的後代的包含區塊,並創建新的堆疊上下文。過濾器效果規範說明了兩者。這不是瀏覽器錯誤;這就是屬性的定義方式。
實際上,這會產生兩個經典錯誤。
不固定的固定模態。 正常情況下 position: fixed 將元素放置在相對於視窗的位置。在過濾後的祖先內,它被放置為該祖先:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
隱藏在鄰居下方的下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下拉式下 過濾後的元素成為自己的堆疊上下文,因此孩子 z-index: 1000 不能再上升到卡片外部的元素之上。它只位於卡片的頂部。
兩者的修復是相同的。將過濾器應用於較窄的元素,例如 img 在卡片內部而不是卡片本身。或在過濾元素之外渲染模態或下拉,這就是 "portal" UI 框架中的元件所做的。這 transform 屬性導致相同的包含塊行為,因此 CSS變換指南 如果您遇到此錯誤且兩個屬性都在發揮作用,那麼它非常有用。
過濾器與背景過濾器和不透明度相比如何?
有幾個屬性與濾波器功能重疊,選擇正確的屬性可以避免副作用。
| 財產 | 影響 | 典型用途 |
|---|---|---|
filter |
元素及其內容 | 照片效果、灰階標誌、影像模糊 |
backdrop-filter |
無論元素背後是什麼 | 磨砂玻璃板,模糊的覆蓋層 |
opacity |
元素及其內容 | 將元素淡入或淡出 |
filter: opacity() |
元素及其內容 | 透明度作為過濾鏈的一部分 |
mix-blend-mode |
該元素如何與其背後的元素融合 | 顏色疊加,雙色調效果 |
backdrop-filter 取相同的功能 filter,但將它們應用於元素背後的內容,這就是玻璃態面板如何模糊下面的頁面。這 玻璃態發生器 建立這些聲明。
用於使元素自行褪色,簡單 opacity 是更清晰的選擇。 opacity() 當您已經在編寫過濾器並且希望同一行中的透明度時,過濾器鏈內部非常有用。
你能為 CSS 過濾器製作動畫嗎?
是的。 filter 是可動畫的,常見的圖案是灰階徽標,在懸停時變成顏色:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
瀏覽器之間插值 grayscale(100%) 和 none 因為 none 被視為其恆等值的匹配函數。當兩個狀態以相同順序列出相同的函數時,插值工作乾淨。如果開始和結束清單的順序不同,結果可以跳躍而不是平滑地動畫,因此以相同的函數順序寫入兩個狀態。
CSS 過濾器會損害效能嗎?
濾鏡需要渲染時間,而模糊成本最高。瀏覽器通常在 GPU 上運行濾鏡,這使得大多數濾色鏡都很便宜。 blur() 不同之處在於:作品隨著模糊半徑和區域大小而增長,因此全螢幕元素上的大半徑,尤其是動畫或位於滾動內容後面的元素,可能會在速度較慢的裝置上掉落幀。
實際限制:
- 在大元素上保持較小的模糊半徑,並避免對半徑本身進行動畫處理。
- 模糊較小的元素或縮小的圖像,而不是整頁包裝。
- 為了運動,動畫
transform和opacity,瀏覽器可以有效率地處理,並保持過濾器靜態。 - 在中階手機上進行測試,而不僅僅是桌上型電腦。
關於特定效果的常見問題
一些效果經常出現足以寫出來。
黑白影像: filter: grayscale(100%); 低於 100% 的值會留下一些顏色,因此 grayscale(50%) 看起來沉默寡言。
文字後面的調暗背景圖像: filter: brightness(60%); 在圖像元素上。事後檢查文字對比而不是猜測;這 顏色對比度檢查器 給出 WCAG 比率。
嵌入式文件或圖表的粗暗模式: filter: invert(100%) hue-rotate(180deg); 反轉翻轉淺色和深色,但也會將色調轉向相反的色調;將色調旋轉 180 度會使大多數顏色恢復到原來的色調。這是一個近似值,裡面的照片看起來會出錯,所以排除它們。
色調黑白: filter: grayscale(100%) sepia(60%); 正如上面所解決的。
全套 CSS 建構器,包括文字陰影和變換,都在 CSS 工具中心.
產生器是私有的嗎?
是的。預覽版和 CSS 是在您的瀏覽器中使用 JavaScript 產生的。沒有上傳任何內容,首先沒有圖像可以上傳,一旦頁面加載,工具就會保持離線工作。複製 CSS 計入每日使用限制,並且僅記錄發生的複製。
