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

画像加工不要!cssだけで画像を暗くしてぼかす。

知ってるのと知らないのでは全然違う!

今回は画像加工が不要でめちゃくちゃ便利な、CSSだけで背景画像をぼかして暗くする方法を紹介します。

画像を置いて、画像をぼかして・暗くして、その上にテキストを乗せて。

CSSだけでこれらの効果を適用させられるので、とっても便利。

ブログのテンプレート作成時にも使える便利なCSSです。

そんな便利なCSSをコピペで簡単に使えるよう紹介します!

目次

CSSだけで背景画像をぼかして暗くした結果サンプルを紹介

フィルターをかけるCSSを利用し、70%の暗さにして、ぼかしを設定し、「position: absolute;」にてテキストを上にもってくるという作り方を紹介します。

使うものは、「filter: brightness(70%) blur(6px);」のようなcssです。

フィルターをかける前。

画像加工不要!cssだけで画像を暗くする方法02

やはりこれだと、文字が全然見えないですよね。

そこでこう!

画像加工不要!cssだけで画像を暗くしてぼかす。

文字が読めるようになりましたね!

前述したとおり、CSSだけで画像を暗くしてぼかして、テキストが読みやすくなりました。

もう少し暗くしても良かったかな?調整は簡単なので、好みの暗さやぼかし度合いに調整してみてください。

CSSだけで背景画像をぼかして暗くする方法:コピペ用HTML

早速、HTMLから紹介します。

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

今回は背景画像に設定するタイプではなく、指定した画像の箇所に対して効果が乗るようにしました。

この方が汎用性は高いかな?と思いまして。

これならECサイト構築をする際にも軽く調整すれば使いやすいかなと。

CSSだけで背景画像をぼかして暗くする方法:コピペ用CSS

続いてCSSがこちら。

.contents-frame {
  position: relative;
  width: 100%;
  max-width:800px;
  margin:auto;
/*中に入るもの(テキスト)を縦横中央に配置*/
  display: flex;
  align-items: center;
  justify-content: center;
}
/*画像にフィルター効果で暗さとぼかし効果をかける*/
.contents-frame img{
  filter: brightness(70%) blur(6px);
  width:100%;
}
/*テキストを大きく、白い太文字に*/
.contents-frame .text-zone{
  position:absolute;
  font-size:2.8rem;
  color:#fff;
  font-weight:bold;
  with:100%;
  margin:0;
  padding:0;
}
.contents-frame::before {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

軽くテキストで説明も加えてみました。

filter: brightness(70%) blur(6px);」の数字のところを調節すれば暗さやぼかし度合いを調節していただけます。

brightnessが明るさで、blurがぼかしです。

画像を暗く&ぼかしを入れて「.text-zone」の指定にてテキストを画像の上に見えやすく配置しています。

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

知っているのと知らないのではかなり違う、とても便利なテクニックです。

以前ルイログが使わせていただいていたテーマ(Godios. Theme)のタイトル箇所にも使われており、少しだけ暗くする(.25)設定がされていました。※現在は配布も終了してしまったテーマです

もちろん、暗さだけ利用したり、ぼかしだけ利用したりもコピペ後に調整すればOKです。

ECサイトでは、完売した商品に暗くして軽くぼかして、上にテキストで完売御礼だとかSOLD OUTだとか乗せてやると完璧!

割と使いやすく書けたと思うので、是非コピペして使ってみてください!

暗くしたり、ぼかしたりの個別の投稿はこちらを参照ください。(こちらは、カバー写真用途の書き方で紹介しています)

あわせて読みたい
【コピペで簡単】CSSだけで背景画像をぼかす方法。画像加工が不要で便利! ルイログのタイトル箇所の背景画像はアイキャッチ画像が使われているのですが、この箇所でも利用されているテクニック。通常のクッキリの画像にcssでぼかしをかけ、上にテキストを乗せてもテキストが普通に見えるようになります。cssだけで背景画像をぼかす方法をコピペで使える形で紹介します。
あわせて読みたい
【コピペで簡単】CSSだけで背景画像を暗くする方法。画像加工が不要で便利! 背景に画像を設定して、その上にテキストを乗せるというデザインを作る際、背景画像が派手だったり鮮やかだったりするとなかなかテキストが見づらいですよね。そういうとき、画像を暗くしないと・・・となりませんか?

 

良きWEBデザインをっ!

SHARE
  • URLをコピーしました!
目次