デバイスの背景色を変更して、-webkit-backdrop-filterを利用できるようにするにはどうすればよいですか？

Question

私は、Webkitの背景フィルタの見た目が大好きで、CSSとHTMLの新機能ですが、背景フィルタはSafariでしか利用できません。バックグラウンドフィルタをサポートしていないデバイスがデフォルトで不透明な背景になるようにする方法を知りたいと思います。私はどのようなコーディング

.background{background:rgb(255,255,255);} 

う：私が欲しいものを背景フィルタ対応デバイスを持つユーザーは、ここで

.background{background:rgba(255,255,255,0);-webkit-backdrop-filter: blur(10px);} 

を見ることがあればここでの例では、私が背景フィルタ対応デバイスを持たないユーザーが見たいものですこれを達成するために使用しますか？

Answer 1

ブラウザが技術をサポートしているかどうかを確認するには、support-Media Queryを使用してください。

あなたのケースでは、この方法を見て次のようになります。

.background { 
    background: rgba(255, 255, 255); 
} 

@supports ((backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px)) { 
    .background { 
     background: rgba(255, 255, 255, 0.7); 
     backdrop-filter: blur(3px); 
     -webkit-backdrop-filter: blur(3px); 
    } 
}