當我們需要在照片中輸入一段文字，文字會受到照片花色的影響而降低閱讀性，一般遇到這種情況時我們會請網頁設計師將圖片拉到 Photoshop 中，並將照片上的文字加上一層底色或邊框，用以區隔文字及照片。當需要處理的圖片只有十來張時，這個方法不會佔據太多的工作時間，可是當你在維護一個運作中的購物網站，網站上有成千上萬張的照片要處理，一張一張進 Photoshop 就顯得有點費勁，一方便累死設計師，另一方便當文字內容調整時，同樣的過程又需要再來一次，實在是費力又不討好，我們需要換個簡便的方式來解決。蘋果在處理這個問題上採用一種很聰明的方式，類似將一片毛玻璃放在照片前面使其模糊，之後再將文字顯示在毛玻璃前面，這樣我們就可以在不破壞圖像的同時，也確保上面的文字訊息可以被清晰的傳遞。這個效果我們也可以在網頁上透過短短幾行 CSS 實現，方法如下：
第一步：設定背景色及透明度
一般來說，毛玻璃的效果比較適合使用白色的背景色，其他顏色也可以達到類似的效果，但受網頁底圖的影響較大，白色的應用範圍比較大。透明度可以依照喜好去調整，具體的效果需要視情況調整。
background: rgba(255, 255, 255, 0.05);第二步：設定模糊的參數
這是一個關鍵的設定，CSS3 有一個 backdrop-filter 的屬性，可以為元素背後的圖像增加一些效果，如模糊、透明度、高反差、黑白等等。這裡我們可以透過 blur() 來調整圖片模糊的程度，範例如下
backdrop-filter: blur(20px);第三步：設定邊緣高光
玻璃的邊緣多半會產生一些高光的反射，我們可以透過 border 來模擬高光的效果，記得在設定的時候，亮度需要高過底色。
border: 1px solid rgba(255, 255, 255, 0.3);第四步：為整個毛玻璃的區域增加一點淡淡的陰影
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);