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

2018年10月15日2022年3月21日

R.U.I

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

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

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

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

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

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

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

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

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