Zenn
💻

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

2020/03/10に公開
CSS
tech

CSSで背景画像をぼかす方法をご紹介します。

つまり、

これを

こうする方法です。

理屈も含めて解説していきますが、結論だけ知りたい方は スキップ しちゃってください。

filter プロパティの blur() 関数を使う

結論としては、CSSの filter プロパティ の blur() 関数 を使います。

まず、深く考えずに要素全体に blur() でぼかしをかけてみましょう。

#target {
    background-image: url('../images/bg.jpg');
    filter: blur(3px);
}

おっと、前面のテキストまで一緒にぼかされてしまいましたね💨

どうやら背面と前面でレイヤーを分ける必要がありそうですね。

レイヤーを分けて背景だけをぼかしてみる

:before 擬似要素でぼかす用のレイヤーを追加してみましょう。

#target {
    position: relative;
    z-index: 0;
}
#target:before {
    content: '';
    background-image: url('../images/bg.jpg');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(3px);
    z-index: -1;
}

ちょっとコード量が多いですが、やっていることはシンプルで、

  • #target そのものではなく #target:before に背景画像と blur() をセット
  • #target に position: relative; を、 #target:before に position: absolute; を設定することで、 #target:before を #target そのものと同じ位置＆同じ大きさにする
  • #target と #target:before の重なりの順序を明示するためにそれぞれに z-index をセット

ということをしているだけです。

動作結果は以下のようになりました。

めでたしめでたし、となりそうですがちょっと待ってください。よく見ると 背景画像の端もぼやけた状態になってしまっています。

このままでいいケースもあるかもしれませんが、端は直線的にしたまま画像だけをぼかしたいことがほとんどではないでしょうか。

ぼかし用のレイヤーをちょっと大きくしてはみ出した部分は隠す

これを解決するために、ぼかし用のレイヤーをあえて少し（ぼかしのサイズ以上）大きくして、はみ出した部分を overflow: hidden; で隠してあげましょう。

#target {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
#target:before {
    content: '';
    background-image: url('../images/bg.jpg');
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    filter: blur(3px);
    z-index: -1;
}

きれいに端が直線になりましたね！🙌

結論

というわけで、改めて、最終的なコードは以下のようになります。

#target {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
#target:before {
    content: '';
    background-image: url('../images/bg.jpg');
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    filter: blur(3px);
    z-index: -1;
}

3px -3px の数字を変えれば、ぼかしの強さを変えることができます。

なお、 filter プロパティ は下表のとおりIE未対応なのでご注意ください。（逆に言えば、IEさえ捨てられるのなら気にせず使えるということですね）

まとめ

  • CSSの filter プロパティを使えば、画像加工をしなくても背景画像をぼかすことができる
  • ただしIEだけは未対応の機能なので要注意
GitHubで編集を提案

Discussion