Question

我正在使用Ionic 2 - Beta 10来开发移动应用。还有一个div我想将背景滤镜模糊应用到。

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

对于不支持background-fiter的版本，我想使用以下css，

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

对于支持backdrop-filter的版本，我想使用它，

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

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

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

Answer 1

我知道你刚才问过这个问题，但这可能对你有所帮助：

Error: Network Error
            at createError (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/axios/lib/core/createError.js:15:15)
            at XMLHttpRequest.handleError [as onerror] (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/axios/lib/adapters/xhr.js:87:14)
            at XMLHttpRequest.callback.(anonymous function) (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:289:32)
            at invokeEventListeners (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
            at invokeInlineListeners (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:166:7)
            at EventTargetImpl._dispatch (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:122:7)
            at EventTargetImpl.dispatchEvent (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
            at XMLHttpRequest.dispatchEvent (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
            at XMLHttpRequest.abort (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:405:16)
            at Object.abort (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:315:13)
            at RequestManager.close (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:146:21)
            at Window.close (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jsdom/lib/jsdom/browser/Window.js:362:29)
            at JSDOMEnvironment.dispose (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jest-environment-jsdom/build/index.js:47:19)
            at Promise.resolve.then (/Users/KG/Desktop/buk-searchkit-boilerplate/node_modules/jest-cli/build/runTest.js:68:9)

Answer 2

另一种方法是尝试使用背景过滤器作为默认设置，如果不支持，则执行其他操作。像这样，

.thisIsTheClass{
  backdrop-filter: blur( 9px ); /*------ Not supported by Firefox in 2021*/
  -webkit-backdrop-filter: blur( 9px );/*------ Not supported by Firefox in 2021*/
}
@supports not ( ( -webkit-backdrop-filter: blur(9px) ) or ( backdrop-filter: blur(9px) ) ) {
  /* CSS to provide fallback alternative for Firefox and similar browsers */
  .thisIsTheClass{ background-color: rgba( 188, 188, 188, 0.4 ); }
}

注意：使用您自己的模糊和颜色值。

如果不支持backdrop-filter，请应用一组不同的样式

2 个答案: