CSSで背景画像のみぼかして表示したりする際のメモ。

• facebook

こんにちは、オフィス狛 デザイン部のSatoです。

iOSのパスコード入力時やWebサイトの背景などでよく見る「背景画像が全体的に表示されていてぼかしがかかっている」状態をCSSで再現したかった際にうまくいかなかったりした所があったのでここに記載しておきます。

最初、画像をcssでぼかす事が「filterという画像の見た目を変えることができるクラスで実装できたはず」という知識はぼんやりあったのでとりあえず親要素に「filter: blur(5px);」を指定してみました。
予想はできていましたが、囲った要素全部にぼかしがかかってるし、なぜか画面の端に滲みが出てかっこ悪くなってしまいました。
これが最初の状態です。中央の白い丸の中は完全に読めなくなっていますね……。


調べた所、全体的にぼかしがかかるのも白い滲みもリストの最初に記号を置いたりする時によく使う「::before」という擬似要素で解決できるそうです。
参考にさせて頂いたサイト
背景を画面いっぱいに表示するためのclassで、参考サイトに記載されている背景を綺麗にぼかすためのCSSを囲ってみた所うまくいきました。


背景を画面いっぱいに表示するための部分とぼかすための部分を分けて指定しないと、画像が表示されている部分のみで画面の高さを計算してしまうようで、フッターの部分が下がってしまいスクロールしないと見えなくなってしまうので気をつけてください。

CSS