rui-log.com
画像加工不要!cssだけで画像をぼかす方法。

【コピペで簡単】cssだけで背景画像をぼかす方法。画像加工が不要で便利!

ルイログのタイトル箇所の背景画像はアイキャッチ画像が使われているのですが、この箇所でも利用されているテクニック。

通常のクッキリの画像にcssでぼかしをかけ、上にテキストを乗せてもテキストが普通に見えるようになります。

cssだけで背景画像をぼかす方法をコピペで使える形で紹介します。

サイトトップ上部を画面いっぱいの画像を敷いてテキストを乗せたりとか、ルイログのようなページのタイトル箇所の背景に画像を設定してテキストを乗せたりとか、結構色んな所で画像の上にテキストを乗せるっていうことしますよね。

でも、画像そのままの上にテキストを乗せるとどうしても画像の方に目が行ったりとか、テキストが読みづらかったりしますよね

そういうときに活用できるcssが、「filter: blur( );」です!

画像加工不要!cssだけで画像をぼかす方法。

 

filter: blur( ); を利用して画像をぼかす

まずはcssで画像をぼかす前の画像(別記事の使い回しですいません)

こちらの画像をcssでぼかします!

cssだけで画像をぼかす方法。ぼかす前

こちらがcssで画像をぼかした後。

画像加工不要!cssだけで画像をぼかす方法。ぼかした後

だいぶボケましたね!

これに、テキストを縦横センタリングして配置します。

画像加工不要!cssだけで画像をぼかす方法。ぼかした後テキストを乗せた状態

こんな感じです。

HTMLはいたってシンプル。

<div class="contents-frame">
  <p class="text-zone">テキストはここへ入力</p>
</div>

これだけです。

class=”text-zone”でテキストのサイズや色等を調整しています。

cssはこちら。

/*画面いっぱいに画像を配置*/
.contents-frame {
  background-attachment: fixed;
  background-image: url(画像URLをここに);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
  width: 100%;
/*中に入るもの(テキスト)を縦横中央に配置*/
  display: flex;
  align-items: center;
  justify-content: center;
}
/*ぼかし&微調整*/
.contents-frame::before {
  background: inherit;
  content: '';
  filter: blur(6px);
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}
/*テキストを大きく、白い太文字に*/
.contents-frame .text-zone{
  position:absolute;
  font-size:2.8rem;
  color:#fff;
  font-weight:bold;
}

少し解説の文字も入れてみました。

cssに少し精通している方は説明文である程度わかるかな?と思いますが、画像をぼかすの自体は「filter: blur();」です!

blur=英語でぼかしという意味ですね。

今回ルイログのタイトル箇所の背景画像をぼかしているのと同じだけぼかした”6px”を入れてみました。

数値を少なくしたらぼかしが薄く、数値を大きくしたらぼかしが強くなっていきます。

まとめ

とっても便利ですね!

現在ルイログが利用させていただいているテーマも、タイトル箇所にアイキャッチが入り、cssで画像をぼかし、タイトル他のテキストを上に乗せるといったテクニックが使われています。(Godios. Theme

ちょっとした時に仕込んでおけば使える便利css。

今回コピペは画面いっぱいに画像を置くときのもので用意しましたが、使いやすいコードだと思うので是非使ってみてください!

合わせて使うと超便利!

cssだけで画像を暗くする方法はこちら!