背景フィルターは使用できません: 最新のブラウザーで背景をぼかした効果を実現するにはどうすればよいですか?

CSS 回避策: とらえどころのない backdrop-filter に対する一時的な解決策

backdrop-filter は有望な CSS 機能であるにもかかわらず、依然として手の届かないところにあります。最新のブラウザ向け。現在のところ、Chrome 51 (実験的 Web プラットフォーム フラグ付き) と Safari 9.1 (-webkit- プレフィックス付き) のみが、これに対する任意のレベルのサポートを提供しています。残念ながら、Firefox 47 はこの点で遅れをとっています。

この限られた可用性により、開発者は望ましい視覚効果を実現するための代替ソリューションを慌てて探しています。背景フィルターが誰でもアクセスできるようになるまで、人気が高まっている回避策の 1 つは、フォールバックとしてわずかに透明な背景を使用することです。

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

/* 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>

背景フィルターをサポートするブラウザー (実験的機能が有効になっている Safari および Chrome) , このコードは、ぼやけた背景効果を効果的にレンダリングします。サポートされていないブラウザの場合、これはフォールバックとして機能し、わずかに透明な背景を提供します。

backdrop-filter の CSS 仕様は進化し続けるため、この回避策は将来的に調整が必要になる可能性があります。ただし、当面は、さまざまなブラウザ プラットフォームでユーザーに望ましい視覚体験を提供する創造的な方法を提供します。

以上が背景フィルターは使用できません: 最新のブラウザーで背景をぼかした効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。