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

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

知ってるのと知らないのでは全然違う!cssだけで背景画像をぼかして暗くする方法。画像加工が不要で便利!

ルイログのタイトル箇所でも使われているテクニック。

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

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

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

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

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

cssだけで背景画像をぼかして暗くする方法。画像加工が不要で便利!

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

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

フィルターをかける前。

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

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

そこでこう!

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

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

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

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

htmlはシンプル

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

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

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

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

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

メインとなる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」の指定にてテキストを画像の上に見えやすく配置しています。

まとめ

知っているのと知らないのではかなり違う!

とても便利なテクニックです。

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

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

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

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

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