背景のぼかし（Background blur）

　CSSのみでの、背景色や背景画像のぼかし方法で、エレメントの内のテキストやコンテンツにはぼかしが入らない方法です。少し古いやり方です。
　ここで紹介するのは、コンテンツのエレメントと背景のエレメントを重ね合わせる方法ですが、backdrop-filter の方が簡易です。

　例では、背景画像とテキストの背景色をぼかしています。擬似エレメント ::before でぼかした画像などを元の場所に被せるという技法です。 被せるために、元のエレメントに position: relative;、z-index: 0;、::before エレメントに position: absolute;、z-index: -1; を定義し、レイヤーのように前後に重ねます。

　背景画像を ::before エレメントでぼかした画像に加工しています。ここでは opacity プロパティは使わない方が綺麗に見えます。
　背景画像を元のエレメントで定義した方が綺麗に見える場合もあります。

　背景色は、 ::before エレメントでぼかした加工をしています。ここでは opacity プロパティを使い背景を透過させています。

　 ::before エレメントに content: ' '; を定義していますが、 ::before エレメントに内容がないためです。内容がないエレメントの背景は表示されません。