Wie kann ich mithilfe von CSS-Verläufen Text in ein Hintergrundbild einblenden?

Verlaufsmasken anwenden, um Text in den Hintergrund einzublenden

Webdesigner stehen oft vor der Herausforderung, Text zu erstellen, der optisch mit einem festen Hintergrundbild verschmilzt. Eine effektive Lösung besteht darin, eine Verlaufsmaske anzuwenden, die den Text in Richtung Hintergrund am oberen Rand des Bildlaufbereichs verblasst.

Um diesen Effekt zu erzielen, bieten Webkit-Browser eine einfache CSS-Lösung:

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

Diese Codezeile blendet die unteren 10 % eines Elements aus, ohne sich auf Bilder zu verlassen. Um sicherzustellen, dass Inhalte nur dann ausgeblendet werden, wenn mehr gescrollt werden muss, sollten Sie das Hinzufügen von padding-bottom: 50 % in Betracht ziehen.

In Browsern, die CSS-Masken unterstützen, wie Firefox und moderne Versionen von Microsoft Edge, lautet die folgende Syntax bevorzugt:

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

Dieser Code erstellt eine vertikale Verlaufsmaske, die den unteren Teil des Elements ausblendet und das Hintergrundbild freigibt.

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