さて、私は StackOverflow で同様の問題を検索しましたが、どれも私のケースに当てはまりませんでした。Web ページ全体を覆う背景画像があり、中央に他のサブ div (ログイン フォーム、いくつかの段落など) を含む div があります。私が望んでいるのは、背景画像のうち div と重なる部分だけをぼかすことです。画像:
したがって、画像の赤い四角形の部分だけをぼかしたいのです。メインの div にぼかしフィルターを追加すると、そのコンテンツ (テキストとフォーム) だけがぼかされます。また、背景画像は div の背景ではなく、ページ全体の背景であることに注意してください。
ベストアンサー1
background-color: rgba(0, 0, 0, 0.61);
backdrop-filter: blur(5px);
背景フィルターウェブページ上の特定の要素または領域の背景をぼかすために使用されるCSSプロパティです。div、画像、その他の要素で使用できます。クロムそしてファイアフォックス103以上。オプション背景色背景を暗くするために使用できます。詳細については、公式ドキュメントを参照してください。https://developer.mozilla.org/en/docs/Web/CSS/バックドロップフィルター
Safariの場合:
-webkit-backdrop-filter: blur(5px);