バックグラウンドイメージの透過処理（イメージを好きな色とレイヤリングする）

記事にした背景

Railsでバックグラウンドの画像を表示する際、そのまま出力すると、主張が強い場合がありますよね。そこで、表示する色を薄くする方法を記述します。

<元画像>

<※編集後>

環境

項目	内容
OS.Catalina	v10.15.4
Ruby	v2.5.1
Ruby On Rails	v5.2.4.3

対応手順

以下のソースを貼り付けておきます。

test.scss

.contents_1p{
  height: 100vh;
  width: 100%;
  //railsなので、app/assets/imagesの配下に画像を設置する
  background-image: image-url('test.jpg');
  //白色を貼り付けて、透過させる。これは青や、緑でも対応可能
  background-color:rgba(255,255,255,0.7);
  //混合モードの指定になります。
  background-blend-mode:lighten;
  //ついでに画像をページ全体に表示する
  background-size: 100%;
}

参考文献

background-blend-mode
Background-image(背景画像)を透過させるCSS

以上です。