什麼是玻璃態?背景濾鏡如何在 CSS 中建構磨砂玻璃

介面設計中到處都是磨砂玻璃面板:桌面作業系統上的半透明側邊欄、讓照片顯示的模糊標題、漂浮在登陸頁面上的漸變上的卡片。 CSS 中的外觀很容易描述,而且奇怪的是很容易出錯。面板最終會變平並呈灰色,或者模糊不會產生任何作用,或者其上的白色文字在一半背景上無法讀取。

本指南解釋了使效果發揮作用的 CSS、為什麼五個屬性都存在、背景不斷變化時如何保持文字可讀性、渲染性能的成本以及如何優雅地回退。工作範例使用 的輸出 Toolz 玻璃態 CSS 產生器,它根據滑桿和即時預覽構建程式碼。

TL;DR: 玻璃形態是一種 UI 風格,其中面板看起來像磨砂玻璃:半透明背景加 backdrop-filter: blur() 因此,它背後的內容會輕柔地顯示出來,通常用 1px 半透明邊框和柔和的陰影完成。它需要兩件事才能可見:部分透明的填充物和麵板後面的彩色東西。文字對比度與下面經過的任何內容都會發生變化,因此請根據真實背景中最亮和最暗的部分進行測試。這 CSS 玻璃態發生器 寫入整個區塊,包括 -webkit- 前綴,客戶端,免費,無註冊。

CSS中的玻璃形態是什麼？

玻璃形態是一種模仿磨砂玻璃的視覺風格。元素獲得低不透明度的背景顏色和模糊其後面像素的背景濾鏡,因此下面的形狀和顏色透過表面顯得柔和。細細的光邊框暗示著玻璃邊緣,柔和的陰影將面板從頁面上抬起。

關鍵屬性是 backdrop-filter,在 W3C 中定義 過濾器效果模組等級 2. 它採用與 相同的濾波器功能 filter (blur(), saturate(), brightness() 以及其餘的)但將它們應用於元素後面的區域而不是元素本身。一個區別是使效果成為可能的原因。

以下是產生器為其磨砂預設產生的完整區塊:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

六行,每行都有作業。

濾鏡與背景濾鏡:有什麼差別?

filter 改變元素本身的繪製方式,包括其文字和子元素。 backdrop-filter 從後面改變元素顯示的內容,並留下元素'自己的內容很尖銳。

財產	它影響什麼	模糊範例結果	典型用途
filter: blur(10px)	元素及其所有子元素	卡片及其文字模糊	影像效果、停用狀態、載入佔位符
backdrop-filter: blur(10px)	無論元素後面畫的是什麼	卡片保持鋒利,透過它看到的背景是模糊的	磨砂玻璃面板、模糊的標頭、模態覆蓋層

如果你模糊了一張牌 filter 並想知道為什麼標題不可讀,您使用了錯誤的屬性。這 CSS 濾波器產生器 覆蓋 filter 一對的一側。

玻璃 CSS 的每一行如何運作?

背景 是色調,其α通道是區塊中最重要的數字。 rgba(255, 255, 255, 0.2) 白色,不透明度為 20%。 alpha 為 1 時,面板是實心的,沒有任何東西可以顯示出來,因此背景模糊是不可見的。 alpha 為 0 時根本沒有表面。大多數可用玻璃位於 0.1 和 0.4 之間。

在生成器中,這是透明度滑桿,命名需要注意:滑桿設定填充的不透明度,因此較高的透明度值使面板更加堅固。透明度 20% 寫入 alpha 為 0.2,40% 寫入 0.4。

背景過濾器 結霜了嗎。 blur(10px) 設定應用於後面內容的模糊半徑。 saturate(120%) 將模糊背景的顏色提高 20%,抵消模糊和白色色調往往產生的灰色、褪色的外觀。生成器' s Blur 滑桿的運行速度為 0 到 40px,飽和度為 100% 到 200%。

前綴副本 存在是因為較舊的 Safari 版本只能理解 -webkit-backdrop-filter. 用相同的值編寫這兩行不需要任何成本,並且涵蓋了這些版本。

邊界半徑 圍繞角落,產生器中的 0 到 50px。模糊被剪成圓形。

邊界 是一條 1px 的白色線,不透明度為 18%。它作為玻璃邊緣的亮點而引人注目,並且在較暗的背景上最為重要,否則面板邊界會溶解。生成器's 邊框複選框將其開啟或關閉;顏色和寬度是固定的。

影子 0 8px 32px rgba(0, 0, 0, 0.12) 是一個寬而微弱的陰影,將面板與頁面分開。如果你想調諧它,那麼 盒子陰影指南 解釋偏移、模糊和深度擴展。

生成器預設產生什麼?

預設是起點而不是完成的設計。所有五個都使用 16px 半徑,除了 Subtle 之外,所有五個都包含邊框。

預設	背景	背景過濾器	邊界	最好結束了
磨砂	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	打開	色彩繽紛的漸變和照片
光	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	打開	文字需要更多支援的繁忙圖像
黑暗的	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	打開	光照,白色文字
充滿活力	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	打開	黑暗或飽和的英雄部分
微妙	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	關閉	小籌碼和徽章

產生器載入所選 Frosted。按一下預設,調整滑桿和色調,並在拖曳時更新程式碼區塊。

為什麼我的背景濾鏡不起作用？

當模糊似乎沒有任何作用時,其中之一幾乎總是原因。

1. 背景不透明。 一個固體 background: #fff 或 alpha 為 1 完全隱藏背景。降低阿爾法。
2. 背後沒有什麼可以模糊的。 在平面單色頁面上,模糊的平面顏色看起來與平面顏色相同。玻璃後面需要一個漸層、一張照片或形狀。產生器'因此,預覽故意位於帶有彩色圓圈的漸層上;這 CSS 梯度指南 是很好地顯示效果的背景的良好來源。
3. 前綴缺失。 較舊的 Safari 版本忽略無前綴屬性。
4. 祖先限制了過濾器所能看到的內容。 在目前的過濾器效果規範中,祖先的一些屬性,例如它自己的屬性 filter,一個 opacity 低於 1 或其他 backdrop-filter,啟動一個新的背景根,模糊僅採樣該根內的內容。如果玻璃位於具有其中之一的外包裝內,請移動效果或屬性。
5. 此面板沒有尺寸或以其他方式完全透明。 零高度元素或 opacity: 0 面板上隱藏了效果以及面板。

如何保持玻璃面板上的文字可讀性?

可讀玻璃比該風格的任何其他部分都需要更多的工作,因為文字顏色是固定的,而面板下方的背景不是。這 WCAG 2.2 對比最小值 要求普通文字的比例至少為 4.5:1,大文字的比例至少為 3:1。在半透明面板上,該比例取決於該時刻面板每個部分後面的內容。

一個工作過的例子使這個具體。對比度是根據兩種顏色的相對亮度計算的,(L1 + 0.05)/(L2 + 0.05)。背景上的玻璃填充複合材料:每個通道變成 α 乘以填充加上(1 減去 α)乘以背景。 Blur 對相鄰像素進行平均,但留下一個區域'平均顏色大致在原來的位置,因此在一種顏色的大面積上,複合材料是一個公平的估計。

填充	背景顏色	複合色	與白色文字形成對比
磨砂,白色,0.2	藍色 #60A5FA	關於 rgb(128, 183, 251)	大約2.1:1
磨砂,白色,0.2	黃色 #FBBF24	關於 rgb(252, 204, 80)	約1.5:1
黑暗, rgba(15, 23, 42, 0.25)	藍色 #60A5FA	關於 rgb(76, 130, 198)	約4.0:1

取第一行。紅色為 0.2 x 255 + 0.8 x 96 = 127.8,綠色為 0.2 x 255 + 0.8 x 165 = 183,藍色為 0.2 x 255 + 0.8 x 250 = 251。該顏色'相對亮度接近 0.454,白色' s 為 1,因此比率為 1.05 /0.504,約 2.1:1。背景黃色部分上的同一面板下降到大約 1.5:1。兩者都沒有通過正文,藍色的深色預設達到大約 4.0:1:對於大文本來說足夠,對於小文本來說仍然低於 4.5:1。

實際修復,依有效性順序排列:

• 提高填充阿爾法。 將透明度從 20% 移動到 40% 會隱藏更多背景並縮小對比度波動的範圍。
• 使淺色文字的色調變暗,或將其變亮以獲得深色文字。帶有白色文字的深色玻璃比帶有白色文字的白色玻璃在更多的背景上保持。
• 增加模糊度。 它可以平滑高對比度的細節,因此字母後面的細白線不會穿過它。
• 新增文字陰影 作為標題的最後手段。這 文字陰影產生器 快速製作柔軟的。
• 在極端情況下進行測試。 檢查面板可以放置的最亮和最暗區域的對比度 顏色對比度檢查器,不是在一個方便的地方。

生成器'複製的 CSS 僅覆蓋玻璃表面。預覽中的白色文字不是輸出的一部分,因此設定 color 自己考慮一下你的元素。

背景濾鏡會損害性能嗎?

它可以。背景模糊迫使瀏覽器讀回元素後面的像素,並在每次該區域發生變化時在它們上運行模糊。在便宜的靜態卡上。在大面積上、滾動期間或當內容在面板後面動畫時,它是合成成本較高的效果之一,而功率較低的手機首先將其顯示為掉落的幀。

控制它的指導方針:

• 保持玻璃面板尺寸適中。全視口磨砂覆蓋層的成本遠高於卡片。
• 喜歡較小的模糊半徑。成本隨著半徑的增加而增加,超過約 20px 時,視覺差異很小。
• 避免將模糊值本身動畫化。動畫 opacity 或者 transform 相反,面板。
• 小心長滾動內容上的黏性標頭,這些內容會在每個滾動框架上重新模糊。在真正的中階手機上進行測試。

如何為需要後備功能的瀏覽器或使用者新增後備?

目前版本的 Chrome、Edge、Firefox 和 Safari 都支援 backdrop-filter. 非常舊的瀏覽器會忽略它並顯示半透明填充而不出現模糊,在低 alpha 值下,文字會留在繁忙的背景上。兩個小的添加會使效果很好地降低。您可以檢查當前的支援表 MDN's 背景濾鏡頁面.

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

的 @supports block 僅適用於存在模糊的半透明版本。這 prefers-reduced-transparency 媒體功能,定義於 媒體查詢等級 5,讓要求作業系統透明度較低的使用者獲得一個可靠的面板。瀏覽器對該媒體功能的支援仍然是部分的,因此將其視為可用的改進,而不是唯一的保障措施。

玻璃態與新態與平面設計

玻璃形態是幾種表面樣式之一,每種樣式都有不同的成本。

風格	表面是如何形成的	主css	力量	主要風險
玻璃態	半透明填充加上背景模糊	background 與阿爾法, backdrop-filter	背景的深度和背景	對比度各不相同,模糊成本性能
新態性	與頁面顏色相同,由成對的陰影升起或按下	兩個 box-shadow 層	柔軟的觸覺控制	控制項和頁面之間的對比度非常低
平坦的	固體填充物,無深度	background	快速且可預測	感覺很平淡
材質式立面圖	固體填充物,具有陰影深度等級	box-shadow	清晰的層次結構	大氣較少

如果柔軟的擠壓外觀更接近您想要的,那麼 新態生成器 建構成對的陰影。許多介面混合了風格:玻璃用於英雄圖像上方的浮動導覽欄,平面卡用於其下方的密集內容。

如何製作玻璃卡,從開始到結束

1. 打開 磨砂玻璃 CSS 產生器 並選擇最接近背景的預設:深色用於淺色照片,磨砂或淺色用於彩色漸層。
2. 將 Blur 設定得足夠高,背景細節不會與文字競爭,通常為 8 至 16px。
3. 設定透明度。從 20% 開始,然後將其提高,直到您的文字在背景最嚴酷的部分通過對比。
4. 使用顏色選擇器選擇色調。從背景中提取的色調'自己的調色板看起來比純白色更自然。
5. 調整半徑以匹配其他組件,並保持深色背景的邊框開啟。
6. 點擊複製 CSS 並將該區塊貼到您的卡片類別上。添加 color 並填滿自己。
7. 將區塊包裹起來 @supports 如果您支援較舊的瀏覽器,請在上面進行後備。

生成器中的所有內容都在您的瀏覽器中運行,因此不會上傳任何內容,並且在頁面加載後它會保持離線工作。對於相關的表面和效果工具, CSS 工具中心 將漸層、陰影、濾鏡和過渡列在一處。