Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケターとして日々従事しており、会社ではWindows、お家ではmacの両刀遣い。SEOやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしています。趣味でベースも嗜んでおり、F-Bassというハイエンドベースを愛用しています。
この記事のもくじ
CATEGORY
ルイログ愛用テーマSWELL

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

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

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

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

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

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

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

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

もくじ

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=英語でぼかしという意味ですね。

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

CSSだけで背景画像をぼかす方法についてまとめ

「filter」CSS、とっても便利ですね!

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

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

合わせて使うと超便利!

関連・応用

CSSだけで画像を暗くする方法

あわせて読みたい
【コピペで簡単】CSSだけで背景画像を暗くする方法。画像加工が不要で便利! 背景に画像を設定して、その上にテキストを乗せるというデザインを作る際、背景画像が派手だったり鮮やかだったりするとなかなかテキストが見づらいですよね。そういうとき、画像を暗くしないと・・・となりませんか?

 

応用技: CSSだけで画像を暗くしてぼかす方法

あわせて読みたい
【コピペで簡単】CSSだけで背景画像をぼかして暗くする方法。画像加工が不要で便利! 知ってるのと知らないのでは全然違う!cssだけで背景画像をぼかして暗くする方法。画像加工が不要で便利!ルイログのタイトル箇所でも使われているテクニック。画像を置いて、画像をぼかして・暗くして、その上にテキストを乗せて。cssだけでこれらの効果を適用させるので、とっても便利。ブログのテンプレート作成時にも使える便利な

 

良きWEBデザインをっ!

▷WEBデザインカテゴリをチェック

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ
閉じる