備忘録）CSSで背景画像のみを暗くする

今回のやりたいこと

背景画像が明るくて文字が読みにくいので、背景画像を暗くする

コード

index.html

<div class="bg">
  <div class="box">
    <h1>HEADDING</h1>
    <p>Lorem ipsum</p>
  </div>
</div>

style.css

html,body{
  height: 100%;
  margin: 0;
}
.bg{
    background: url()
    background-size: cover;
    position: relative;
    height:100%;
}
.bg::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;
}
h1,p{
  color: #fff;
}

文字は暗くする必要がないので、.boxを浮かせる(position: absolute)ことで解決しています。注意として.boxを浮かせると.bg::before.bg::beforeの大きさがなくなってしまうのでcontent:'';を指定。

参考サイト