Background image transparency (layering the image with your favorite color)

Background of the article </ font>

When displaying a background image in Rails, if you output it as it is, there are cases where the claim is strong. Therefore, I will describe how to make the displayed color lighter.

Image.png

<* After editing>Image.png

environment </ font>

item Contents
OS.Catalina v10.15.4
Ruby v2.5.1
Ruby On Rails v5.2.4.3

Correspondence procedure </ font>

Paste the following source.

test.scss


.contents_1p{
  height: 100vh;
  width: 100%;
  //Because it is rails, app/assets/Place images under images
  background-image: image-url('test.jpg');
  //Paste white to make it transparent. This can be done in blue or green
  background-color:rgba(255,255,255,0.7);
  //The mixed mode is specified.
  background-blend-mode:lighten;
  //By the way, display the image on the entire page
  background-size: 100%;
}

References </ font>

background-blend-mode CSS that makes the Background-image transparent

that's all.