Wie kann ich Text mithilfe von CSS-Verläufen beim Scrollen in einen Hintergrund einblenden?

Anwenden einer Verlaufsmaske, um Text über dem Hintergrund auszublenden

Möchten Sie, dass Ihr Text beim Scrollen der Benutzer reibungslos in den Hintergrund übergeht? Wenn ja, könnte das Anwenden einer Verlaufsmaske auf den Hintergrund oben in Ihrem scrollenden Div die Lösung sein, die Sie brauchen.

Lösung:

Glücklicherweise bietet Webkit eine praktische Lösung CSS-Option hierfür:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Dieser Code erstellt einen Farbverlauf, der von undurchsichtig (oben) zu transparent (10 % von oben) übergeht unten) für das Element. Um sicherzustellen, dass Inhalte beim Scrollen nur ausgeblendet werden, fügen Sie padding-bottom: 50 % hinzu.

Mozilla (Gecko) Fallback:

Ursprünglich erforderte Firefox ein SVG-Maskenbild. unterstützt jetzt aber mask-image.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mithilfe von CSS-Verläufen beim Scrollen in einen Hintergrund einblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!