CSSで背景画像をぼかす方法【決定版】

CSSで背景画像をぼかす方法をご紹介します。 つまり、 これを こうする方法です。 理屈も含めて解説していきますが、結論だけ知りたい方は スキップ しちゃってください。 filter プロパティの blur() 関数を使う 結論としては、CSSの filter プロパティ の blur() 関数 を使います。 まず、深く考えずに要素全体に blur() でぼかしをかけてみましょう。 #target { background-image: url('../images/bg.jpg'); filter: blur(3px); } おっと、前面のテキストまで一緒にぼかされてしまいましたね💨 どうやら背面と前面でレイヤーを分ける必要がありそうですね。 レイヤーを分けて背景だけをぼかしてみる :before 擬似要素でぼかす用のレイヤーを追加してみましょう。 #target { position