【画像加工不要】超簡単！CSSだけで背景画像のみを暗くする方法【プログラミング】

おはこんばんにちは！ノボルです。

背景画像を暗くしたいんだけど、加工するのがめんどくさい…。

画像加工ソフトを使わなくても、CSSだけでできるよ！

Web制作の際、上の文字などを読みやすくするために背景画像を暗くしたいときってありませんか？

しかし、写真を加工せず、CSSの「opacity」プロパティで暗くしようとすると、画像だけでなく文字も暗くなってしまいます。

そこで今回は、CSSだけで背景画像のみを暗くする方法をご紹介します！

現役のプロのメンターから学べるオンラインブートキャンプ

CSSだけで背景画像のみを暗くする方法
最後に

CSSだけで背景画像のみを暗くする方法

実現したいこと

今回実現したいことは、以下の通りです。

See the Pen WNvrgRo by monkey d ruffy (@ruffy126) on CodePen.

背景画像のみが暗くなり、白色のテキストは暗くなっていないのがわかると思います。

さっそく、HTMLとCSSの解説をしていきます。

HTML

HTMLは以下の通りです。


<div class="background">
  <div class="box">
    <h1>Title</h1>
    <p>Subtitle</p>
  </div>
</div>

背景を指定するdiv.backgroundの中に、テキストの入ったdiv.boxを作成し、「position: absolute;」で浮かせます。

CSS

CSSは以下の通りです。


html,body {
  height: 100%;
  margin: 0;
}

.background {
    background: url(https://drive.google.com/uc?export=view&id=1K8HSe_KEhiSH4pdNU6GL3gxUxA98viu-) no-repeat center;
    background-size: cover;
    position: relative;
    height:100%;
}

.background::before {
    /* 透過させた黒を重ねる */
    background-color: rgba(0,0,0,0.5);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

.box {
  position: absolute;
  width: 100%;
  text-align: center;
  top:50%;
  left:50%;
  transform:translateY(-50%)translateX(-50%);
  -webkit-　　　
  transform:translateY(-50%)translateX(-50%);
  margin:auto;
}

h1,p {
  color: #fff;
}

div.backgroundに背景画像を指定し、「position: relative ;」を適応します。

次に、div.backgroundのbefore要素に透過させた黒を重ねます。
（RGBaのアルファ値は、0〜1で透明度を指定）

div.boxを浮かせているので、 h1やpは暗くなりません。

ただし、div.boxを浮かせると、.background::beforeの大きさが0になってしまうため、
「context: ‘ ‘ ;」を指定してあげます。

以上です！