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

2024 6/13

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

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

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

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

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

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

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

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

使うものは、「filter: brightness(70%) blur(6px);」のような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だとか乗せてやると完璧！

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

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