如果不支持背景濾鏡，則應用不同的樣式集

Question

我正在使用Ionic 2 - Beta 10開發移動應用程序。有一個div我想應用背景模糊濾鏡。

我知道這在大多數情況下都不被支持，但是如果不支持背景濾鏡的情況下，我有一個沒有模糊的回落設計。

對於不支持的背景下，fiter版本，我想用下面的CSS，

.panel { 
background-color: #FFF; 
opacity: 1; 
} 

而且對於支持的背景下，過濾器的版本，我想用這個，

.panel { 
background-color: #FFF; 
opacity: .5; 
backdrop-filter: blur(5px); 
-webkit-backdrop-filter: blur(5px); 
} 

問題是不透明度對於回退是不同的。

如果一個屬性不被支持，我該如何確定和設置不同的樣式？

Answer 1

我知道你問的問題前一段時間，但是這可能仍然幫助您：

/* Gets applied everywhere */ 
.panel { 
    background-color: #FFF; 
    opacity: 1; 
} 

/* Gets applied if supported only */ 
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) { 
    .panel { 
    background-color: #FFF; 
    opacity: .5; 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
    } 
}