背景画像を薄暗くするには

背景画像を薄暗くする方法を忘れがちなので、メモとして記載します。

・方法

[HTML]

<div class="bg-img">
  <img src="#" alt="背景画像">

</div>

[CSS]

.bg-img{
  width:100%;
  height:100%;
  position: relative;
}

.bg-img img{
  /*背景画像のCSSを指定*/
}

.bg-img::before{
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

擬似要素を使えば楽勝。
これくらいさっさと覚えよwww