Warum wird meine CSS-Verlaufsüberlagerung nicht über meinem Hintergrundbild angezeigt?

Verlaufsüberlagerung auf Hintergrundbildern: Ein CSS-Rätsel gelöst

Der Versuch, eine Verlaufsüberlagerung auf Ihr Hintergrundbild anzuwenden, um einen eleganten Fading-Effekt zu erzielen, kann möglich sein eine rätselhafte Aufgabe sein. Obwohl sowohl der Farbverlauf als auch das Bild im CSS angegeben wurden, scheint nur eine Ebene angezeigt zu werden.

Um dieses Problem zu beheben, überarbeiten Sie die Codestruktur und stellen Sie sicher, dass die URL für das Hintergrundbild am Ende platziert wird der Stildeklaration. Die korrekte Syntax lautet wie folgt:

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

Diese Änderung stellt sicher, dass das Hintergrundbild oben auf der Verlaufsebene platziert wird, was zu einer nahtlosen Überblendung führt.

Das obige ist der detaillierte Inhalt vonWarum wird meine CSS-Verlaufsüberlagerung nicht über meinem Hintergrundbild angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!