Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

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

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

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

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

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

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

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

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

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

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をコピーしました!
もくじ