「背景フィルター」に頼らずにぼやけたガラス効果を実現するにはどうすればよいですか?

CSS のとらえどころのない背景フィルターのぼやけた代替手段

その魅惑的な効果にもかかわらず、CSS の背景フィルターはとらえどころがなく、2016 年 7 月 1 日の時点でブラウザのサポートが制限されています。完全な実装を心待ちにしている間に、目的のぼやけたガラス効果に近づける回避策を検討してみましょう。

透明なフォールバック

背景フィルタをサポートしていないブラウザの場合は、わずかに透明な背景はすりガラス効果を模倣できます。次のコードは、単純なフォールバックを提供します。

<code class="css">/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}</code>

ブラウザ サポートの活用

背景フィルタをサポートするブラウザの場合、そのぼかし機能を利用できます。このシナリオに対応する CSS コードの拡張バージョンは次のとおりです。

<code class="css">/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}</code>

このコードは、ぼかし効果がサポートされているブラウザーに適用されることを保証しますが、サポートされていないブラウザーでは透過フォールバックが適切に機能を低下させます。

例: ブラーの動作を確認する

背景フィルターのサポートがない場合、次の画像に示すように、要素はわずかに透明な背景で表示されます。

[画像の挿入]透明フォールバック効果]

背景フィルターのサポートにより、次の画像に示すように、ぼやけたガラス効果が定着します:

[ぼやけた効果の画像を挿入]

結論

ここで紹介する背景フィルターの回避策は、ブラウザーのサポートに関係なく、Web 要素でぼやけたガラス効果を実現するための実用的なソリューションを提供します。将来的には背景フィルターが完全に利用可能になることが予想されますが、この技術はユーザー エクスペリエンスを向上させるための貴重な代替手段を提供します。

以上が「背景フィルター」に頼らずにぼやけたガラス効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。