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

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

同様の効果を達成する 1 つの方法は、微妙な透明度を持つ背景を使用することです。以下の 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);
  }
}

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

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

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

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