背景に画像を設定して、その上にテキストを乗せるというデザインを作る際、背景画像が派手だったり鮮やかだったりするとなかなかテキストが見づらいですよね。
そういうとき、画像を暗くしないと・・・となりませんか?
画像編集をせずとも、画像はそのままにcssだけで画像を暗くする方法を紹介します!

コピペで簡単!背景画像をcssだけで暗くする方法
使うものは、「background-color: rgba(0,0,0,.7);」のようなcssです。
背景色を真っ黒にし、透明度を設定し、「position: absolute;」にてその背景色を画像よりも上にもってきて画像を暗くするという作り方です。
背景を暗くする前。
これだと、文字が全然見えないですよね。
背景を暗くしてみましょう。
暗くするととても見やすくなりました!
さて、コードの紹介をしていきましょう。
まず、HTMLはシンプルに。
<div class="contents-frame"> <p class="text-zone">テキストをここに入力</p> </div>
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」にて白文字・太文字・大きめにしました。)
まとめ
知っているのと知らないのではかなり違う!
とても便利なテクニックです。
現在ルイログが使わせていただいているテーマのタイトル箇所にも使われており、少しだけ暗くする(.25)設定がされています。
今回コピペは画面いっぱいに画像を置くときのもので用意しましたが、利用用途によっては必要箇所を変更してください。
画像を暗くするというところでいうと「rgba(0,0,0,.7);」の”.7″のところが重要で、微調整すれば暗さ(黒の透明度)も変えられます。(1で真っ黒、0で透明)
なので、複数用意しておいて画像によって暗さを変えたりなんてことも容易にできます。
EC系サイトだと、商品画像をを暗くして上に完売御礼!とか文字のせたりが完売した商品に対してclass指定を一つ追加するだけで容易にできる感じです。
画像加工し直さなくても良いってめっちゃ便利だね!?
是非使ってみてください!
合わせて使うと超便利なcssだけで画像をぼかす方法はこちら!
応用技として、cssだけで画像を暗くしてぼかす場合はこちらをチェック!
良きWEBデザインをっ!