如果不支持背景过滤器，则应用一组不同的样式

Question

我正在使用 Ionic 2 - Beta 10 开发移动应用程序。我想对一个 div 应用背景滤镜模糊。

我知道大多数情况下不支持这一点，但对于不支持背景滤镜的情况，我有一个没有模糊的后备设计。

对于不支持background-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);
   }
 }