有時候我們想放一張背景圖，但是又不希望背景圖太過搶眼，這時候除了可以在背景上加上半透明底色的內框之外，還可以對這個內框做模糊效果，這樣就能讓文字變得清晰，又不顯單調。
範例
div {
backdrop-filter:blur(5px);
}
backdrop意思是背景，filter是濾鏡，背景濾鏡有很多個值可以用，其中一個是blur，表示模糊，後面的數值是模糊程度。
實際操作
沒有模糊效果
See the Pen no-backdrop-filter CSS by kumo (@kumo-tw) on CodePen.
有模糊效果
See the Pen backdrop-filter CSS by kumo (@kumo-tw) on CodePen.
瀏覽器兼容問題
值得注意的是，目前 safari 並無支援此項用法，因此在 safari 瀏覽器上看並不會有模糊效果，請再加上-webkit-backdrop-filter:blur(5px);。
其他值
除了模糊效果之外，還有很多其他效果，以下列出backdrop-filter所有效果。
- blur：模糊
- brightness：亮度
- contrast：對比
- grayscale：灰階
- hue-rotate：色相旋轉
- invert：負片
- sepia ：懷舊
- saturate：飽和
- opacity：透明度
- drop-shadow：下拉陰影
brightness：亮度
See the Pen backdrop-filter:brightness CSS by kumo (@kumo-tw) on CodePen.
contrast：對比
See the Pen backdrop-filter:contrast CSS by kumo (@kumo-tw) on CodePen.
grayscale：灰階
See the Pen backdrop-filter:grayscale CSS by kumo (@kumo-tw) on CodePen.
hue-rotate：色相旋轉
See the Pen backdrop-filter:hue-rotate CSS by kumo (@kumo-tw) on CodePen.
invert：負片
See the Pen backdrop-filter:invert CSS by kumo (@kumo-tw) on CodePen.
sepia：懷舊
See the Pen backdrop-filter:sepia CSS by kumo (@kumo-tw) on CodePen.
saturate：飽和
See the Pen backdrop-filter:saturate CSS by kumo (@kumo-tw) on CodePen.
drop-shadow：下拉陰影
下拉陰影和box-shadow很像，不同的是它是以物件本身內容產生陰影，因此裡面的文字或圖像也會有所渲染，而box-shadow則是以區塊來產生陰影，其內容不會受到影響。
See the Pen backdrop-filter:drop-shadow CSS by kumo (@kumo-tw) on CodePen.
混合應用
backdrop-filter可以同時使用多個值，以下作為範例：
See the Pen mix-backdrop-filterCSS by kumo (@kumo-tw) on CodePen.
以上皆需要多加-webkit-，safari 瀏覽器才有效果。