Wie erstelle ich mithilfe von CSS-Verläufen einen allmählichen Einblendeffekt für Hintergrundbilder?

Erstellen einer allmählichen Überblendung in Hintergrundbildern mithilfe von CSS-Verläufen

Beim Anwenden eines linearen Verlaufs über ein Hintergrundbild kann die Anzeige schwierig sein beide Elemente gleichzeitig. Die folgenden Schritte führen Sie durch den Prozess:

Falscher Versuch:

body {
  background: url('background_image.jpg') no-repeat,
    -webkit-gradient(linear, left top, left bottom,
      from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

In diesem Beispiel wird der Farbverlauf nicht angezeigt, da das Hintergrundbild zuvor platziert wurde es.

Richtiger Ansatz:

Zum Anzeigen des Farbverlaufs und Hintergrunds Um das Bild korrekt anzuzeigen, stellen Sie sicher, dass das Hintergrundbild wie folgt am Ende der CSS-Zeile platziert wird:

body {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))),
    url('background_image.jpg') no-repeat;
}

Durch die Platzierung der Bild-URL am Ende der Zeile überlagert der Farbverlauf das Bild und sorgt so für der gewünschte Fading-Effekt von Schwarz nach Transparent am unteren Rand des Hintergrunds.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS-Verläufen einen allmählichen Einblendeffekt für Hintergrundbilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!