[RUBY] Hintergrundbildtransparenz (Überlagern des Bildes mit Ihrer Lieblingsfarbe)

Artikelhintergrund </ font>

Wenn Sie ein Hintergrundbild in Rails anzeigen und es so ausgeben, wie es ist, gibt es Fälle, in denen der Anspruch stark ist. Daher werde ich beschreiben, wie die angezeigte Farbe heller gemacht wird.

Image.png

<* Nach der Bearbeitung>Image.png

Umgebung </ font>

Artikel Inhalt
OS.Catalina v10.15.4
Ruby v2.5.1
Ruby On Rails v5.2.4.3

Korrespondenzverfahren </ font>

Fügen Sie die folgende Quelle ein.

test.scss


.contents_1p{
  height: 100vh;
  width: 100%;
  //Weil es Schienen sind, App/assets/Platzieren Sie Bilder unter Bildern
  background-image: image-url('test.jpg');
  //Fügen Sie Weiß ein, um es transparent zu machen. Dies kann in blau oder grün erfolgen
  background-color:rgba(255,255,255,0.7);
  //Der gemischte Modus ist angegeben.
  background-blend-mode:lighten;
  //Zeigen Sie das Bild übrigens auf der gesamten Seite an
  background-size: 100%;
}

Referenzen </ font>

background-blend-mode CSS, um das Hintergrundbild transparent zu machen

das ist alles.