Wie kann ich einen CSS-Verlauf über ein Hintergrundbild legen?

CSS-Verlauf über ein Hintergrundbild legen

Viele Entwickler stoßen auf Schwierigkeiten, wenn sie versuchen, gleichzeitig ein Hintergrundbild und einen linearen Verlauf anzuzeigen. Das Ziel besteht darin, am unteren Rand des Hintergrunds einen allmählichen Übergang zu erzeugen, normalerweise von Schwarz zu Transparent. Allerdings ist in den meisten Fällen nur der Farbverlauf oder das Bild sichtbar, nicht beides.

Die Lösung für dieses Problem liegt in der korrekten Angabe der Reihenfolge der Elemente im Hintergrundstil. Um den Farbverlauf erfolgreich über das Bild zu legen, befolgen Sie diese überarbeitete Syntax:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

Durch die Platzierung der Hintergrundbild-URL am Ende der Zeile stellen wir sicher, dass sie unter dem Farbverlauf angezeigt wird, sodass beide Elemente angezeigt werden können sichtbar.

Das obige ist der detaillierte Inhalt vonWie kann ich einen CSS-Verlauf über ein Hintergrundbild legen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!