ネイティブ サポートのないブラウザで CSS バックドロップ フィルターをエミュレートするにはどうすればよいですか?

CSS バックドロップ フィルターの回避策

その約束にもかかわらず、CSS バックドロップ フィルターは最新のブラウザーではとらえどころのない機能のままです。 Chrome 51 では実験的 Web プラットフォーム フラグによる限定的なサポートが提供されており、Safari 9.1 では -webkit- プレフィックスの使用が必要であるため、実用性には疑問が残ります。幸いなことに、ネイティブの背景フィルターがサポートされていない場合でも、目的の効果をエミュレートできる回避策があります。

有望なアプローチの 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>

このソリューションはブラウザー間の互換性を提供し、一貫した視覚エクスペリエンスを提供します。ブラウザが背景フィルターをサポートしているかどうかは関係ありません。また、フォールバック効果と背景フィルターのサポートによる強化された効果を示す例も含まれています。

以上がネイティブ サポートのないブラウザで CSS バックドロップ フィルターをエミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。