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.
<* After editing>
item | Contents |
---|---|
OS.Catalina | v10.15.4 |
Ruby | v2.5.1 |
Ruby On Rails | v5.2.4.3 |
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%;
}
background-blend-mode CSS that makes the Background-image transparent
that's all.
Recommended Posts