「backdrop-filter」効果をサポートしていないブラウザでどのように実現できますか?

CSS: 使用できない背景フィルターの代替手段を提供する

CSS の背景フィルター機能は、ほとんどの最新のブラウザーでは依然としてアクセスできません。私たちは将来のサポートを期待していますが、代替ソリューションの発見が不可欠になります。

同様の効果を達成する 1 つの方法は、微妙な透明度を持つ背景を使用することです。以下の CSS コードは、このアプローチを示しています。

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

/* Blurred effect with backdrop support */
@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>

backdrop-filter がサポートされていない場合、わずかに透明な背景がフォールバックとして機能します。背景フィルターをサポートするブラウザでは、ぼやけた効果が表示されます。

背景フィルターのサポートなしとありの効果を示すサンプルを以下に示します。

[透明フォールバックのイメージ]
[ぼやけた画像]

この戦略を採用すると、ネイティブの背景フィルター機能を持たないブラウザーでも、要素に視覚的に魅力的なフィルターを組み込むことができます。

以上が「backdrop-filter」効果をサポートしていないブラウザでどのように実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。