[RUBY] Transparence de l'image d'arrière-plan (superposition de l'image avec votre couleur préférée)

Arrière-plan de l'article </ font>

Lors de l'affichage d'une image d'arrière-plan dans Rails, si vous la sortez telle quelle, il existe des cas où la revendication est forte. Par conséquent, je décrirai comment éclaircir la couleur affichée.

<Image d'origine>Image.png

<* Après modification>Image.png

environnement </ font>

article Contenu
OS.Catalina v10.15.4
Ruby v2.5.1
Ruby On Rails v5.2.4.3

Procédure de correspondance </ font>

Collez la source suivante.

test.scss


.contents_1p{
  height: 100vh;
  width: 100%;
  //Parce que ce sont des rails, une application/assets/Placer les images sous les images
  background-image: image-url('test.jpg');
  //Collez du blanc pour le rendre transparent. Cela peut être fait en bleu ou en vert
  background-color:rgba(255,255,255,0.7);
  //Le mode mixte est spécifié.
  background-blend-mode:lighten;
  //Au fait, affichez l'image sur toute la page
  background-size: 100%;
}

Références </ font>

background-blend-mode CSS pour rendre l'image d'arrière-plan transparente

c'est tout.