Help us understand the problem. What is going on with this article?

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

記事にした背景

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

<元画像>image.png

<※編集後>image.png

環境

項目 内容
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

以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away