コピペしてすぐに使える！cssのみで画像をぼかす(ブラー処理）方法【初心者向け】

皆さんこんばんわ！バジラです！

今回はですね、フォトショ等で画像編集を行わずにcssのみで画像をぼかす（ブラー処理）方法を紹介します！

まぁ言っちゃえばフォトショで加工して仕舞えばいいんですけど、コーディングの最中の微妙な仕様変更でスピード感が求められたりとそういう時が使いどきかなと思います！

あとはホバーアクションですね！ホバーと同時に、背景ぼかし＋タイトル出現！とかは面白そうです！

まずはサンプル

プロの現場では、常にお客さんという存在がいますのでこんなことはできないはず。

せりゃ！なかなかムフフな画像をサンプルにしてみました！20pxでぼかしています！
ちなみに元画像はこれ。

どこで使うのか。

んー。これは中々に難しいところ。使う場面というのは限られている気もしますね。

例えば、お客さんが任意で選択できる場合の下層ページタイトル帯の背景だったり、画像をホバーして文字を浮き上がらせるっていうアクションがあったとして、その際に文字を見やすくするために背景の画像をぼかすだとか。少し特殊なケースでの使用となる気がします。

さぁコードだ！ctrl+cの準備はいいか！！

html

<div class="hcb_wrap">
 <div class="hoge"></div>
</div>

css

.hoge{
   position: relative;
   z-index: 0;
   overflow: hidden;
   width: 100%;
   height:200px;
   background:url(画像のパス); //位置・リピートはお好みで！
  &:before{
      /* ぼかし処理の設定 */
      content: '';
      position: absolute;
      background: inherit;
      filter: blur(5px);//ぼかしの強さ
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -1;
}

簡単な作業解説としましては、

• .hogeにbackgroundで背景画像を設定。
  
• 背景画像をbeforeにも引き継がせるためbeforeにbackground: inheritを設定
  
• 画像の端がボヤけるのでぼかした分だけpositionで位置を微調整

って感じですね！あとはまぁoverflowを入れたりするわけですが、その辺はまんまコピーしておけばいいようにしてあります。

薄くするとこんな感じ

はい！サンプルと同じ画像を5pxぼかしに！ぼかしが薄くなっているのが分かりますよね！えちち！

まとめ

真面目に話しますと、ぼかしの効果はもちろんですが、この処理の最大のメリットは

サイズが小さい画像でもぼかしを入れることで、使える場面が増える

ってところです。

大きい画像ではっきりと画像を使用したいんだけど、それができない。でも指定された画像は使わなきゃいけない！

なんて時にこの処理で適度に画像をぼかし、背景なんかで使用すればうまく対応できるかもしれませんね！うーんぼかしって偉大！！

みなさんもぜひ制作に活かしてみてくださいね！

はい、それでは今回はこの辺で終わりにしようと思います！お付き合いいただきありがとうございましたー！いやー…馬場ふみかちゃん可愛いなまじで..