古いブラウザでも CSS を使用して背景のぼかし効果を作成する方法

CSS: Backdrop-Filter Polyfill

要素の背景にぼかしやその他の効果を有効にする CSS 機能である Backdrop-filter は残ります最新のブラウザではほとんどサポートされていません。代わりに、フォールバックとしてわずかに透明な背景を使用することを検討してください。

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

@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 では、プレフィックスなしの背景フィルターのサポートを導入する可能性のある将来の CSS リビジョンも考慮しています。

視覚化:

[背景フィルターのサポートなしの透過的なフォールバックのイメージ] [画像背景フィルターのサポートによるぼかし効果]

以上が古いブラウザでも CSS を使用して背景のぼかし効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。