css - 如果不支持背景过滤器，则应用不同的样式集

我正在使用Ionic 2-Beta 10开发移动应用程序。还有一个div，我要将背景滤镜模糊应用到其中。

我知道大多数情况下不支持此功能，但是对于不支持背景滤镜的情况，我有一个没有模糊效果的后退设计。

对于不支持背景拟合的版本，我要使用以下CSS，

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

对于确实支持背景过滤器的版本，我想使用它，

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

问题在于回退的不透明度有所不同。

如果不支持一个属性，如何确定和设置其他样式？

最佳答案

我知道您之前曾问过这个问题，但这可能仍然可以帮助您：

/* 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);
   }
 }

关于css - 如果不支持背景过滤器，则应用不同的样式集，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38561893/