Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケターとして日々従事しており、会社ではWindows、お家ではmacの両刀遣い。SEOやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしています。趣味でベースも嗜んでおり、F-Bassというハイエンドベースを愛用しています。
この記事のもくじ
CATEGORY
ルイログ愛用テーマSWELL
今選ぶ最適なサーバーはConoHa WING

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

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

背景に画像を設定して、その上にテキストを乗せるというデザインを作る際、背景画像が派手だったり鮮やかだったりするとなかなかテキストが見づらいですよね。

そういうとき、画像を暗くしないと・・・となりませんか?

いえいえ。そこで良い方法があります。

画像編集をせずとも、画像はそのままにCSSだけで画像を暗くする方法を紹介します!

もくじ

コピペで簡単!背景画像をCSSだけで暗くする方法

使うものは、「background-color: rgba(0,0,0,.7);」のような CSS です。

背景色を真っ黒にし、透明度を設定し、「position: absolute;」にてその背景色を画像よりも上にもってきて画像を暗くするという作り方です。

背景を暗くする前

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

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

背景を暗くしてみましょう。

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

暗くするととても見やすくなりました!

これを実現する HTML / CSS コードの紹介をしていきましょう。

背景画像をCSSだけで暗くするためのHTMLコピペコード

まず、HTMLはシンプルに。

<div class="contents-frame">
  <p class="text-zone">テキストをここに入力</p>
</div>

背景画像をCSSだけで暗くするためのCSSコピペコード

CSSはこちら。

.contents-frame {
  background-attachment: fixed;
  background-image: url(画像URL);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height:100vh;
/*中に入るもの(テキスト)を縦横中央に配置*/
  display: flex;
  align-items: center;
  justify-content: center;
}
  .contents-frame::before {
  content: '';
  background-color: rgba(0,0,0,.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*テキストを大きく、白い太文字に*/
.contents-frame .text-zone{
  position:absolute;
  font-size:2.8rem;
  color:#fff;
  font-weight:bold;
}

少し解説の文字も入れてみました。

background-color: rgba(0,0,0,.7);」で背景色を黒くして透明度の指定を70%(透明度30%)に、「position: absolute;」〜で背景を画像の上&配置する形です。

上に乗せる文字は背景画像を暗くしているので「.text-zone」にて白文字・太文字・大きめにしました。

コピペで簡単!背景画像をCSSだけで暗くする方法についてまとめ

知っているのと知らないのではかなり違う、とても便利なテクニックを紹介しました。

以前ルイログが使わせていただいていた WordPressテーマにも、タイトル箇所に使われていました。少しだけ暗くする(.25)設定でしたね。

今回のコピペで使えるCSSコードは画面いっぱいに画像を置くときのもので用意しましたが、利用用途によっては必要箇所を変更してください。

画像を暗くするというところでいうと「 rgba(0,0,0,.7); 」の”.7″のところが重要で、微調整すれば暗さ(黒の透明度)も変えられます。

1で真っ黒、0で透明

なので、CSSコードを複数用意しておいて画像によって暗さを変えたりなんてことも容易にできます。

EC系のショッピングサイトだと、「商品画像をを暗くして上に完売御礼!の文字を乗せる」が完売した商品に対する class 指定 1つで容易にできる感じです。

画像加工し直さなくても良いってめっちゃ便利だね!?

是非使ってみてください!

合わせて使うと超便利な CSSだけで画像をぼかす方法 はこちら。

あわせて読みたい
【コピペで簡単】CSSだけで背景画像をぼかす方法。画像加工が不要で便利! ルイログのタイトル箇所の背景画像はアイキャッチ画像が使われているのですが、この箇所でも利用されているテクニック。通常のクッキリの画像にcssでぼかしをかけ、上にテキストを乗せてもテキストが普通に見えるようになります。cssだけで背景画像をぼかす方法をコピペで使える形で紹介します。

応用技として、CSSだけで画像を暗くしてぼかす場合はこちらをチェック!

あわせて読みたい
【コピペで簡単】CSSだけで背景画像をぼかして暗くする方法。画像加工が不要で便利! 知ってるのと知らないのでは全然違う!cssだけで背景画像をぼかして暗くする方法。画像加工が不要で便利!ルイログのタイトル箇所でも使われているテクニック。画像を置いて、画像をぼかして・暗くして、その上にテキストを乗せて。cssだけでこれらの効果を適用させるので、とっても便利。ブログのテンプレート作成時にも使える便利な

良きWEBデザインをっ!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ