Wie blendet man Text mithilfe einer CSS-Verlaufsmaske in einen Hintergrund ein?

Anwenden einer Verlaufsmaske, um Text in den Hintergrund zu blenden

Einführung

Einbindung einer vollständigen Das Einfügen eines bildschirmfesten Hintergrundbilds in ein scrollendes Div stellt oft die Herausforderung dar, den darüber liegenden Text reibungslos auszublenden, wenn Benutzer nach unten scrollen. In diesem Artikel wird eine Lösung mithilfe einer Verlaufsmaske in CSS untersucht.

Frage

Wie können Sie in CSS eine Verlaufsmaske anwenden, um Text nur über einen Teilbereich in den Hintergrund einzublenden? des Elements, wodurch ein allmählich verblassender Effekt entsteht?

Antwort

Verwenden Mit der Eigenschaft -webkit-mask-image von Webkit können Sie den gewünschten Effekt erzielen:

-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 linearen Farbverlauf, der von undurchsichtigem Schwarz am oberen Rand des Elements zu transparent an den unteren 10 % übergeht. Durch das Hinzufügen von padding-bottom: 50 % zum Element können Sie sicherstellen, dass der Inhalt nur ausgeblendet wird, wenn mehr zum Scrollen vorhanden ist.

Notizen

• Diese Lösung erfordert Browserkompatibilität, da sie auf der proprietären Eigenschaft -webkit-mask-image von Webkit basiert.
• Mozilla (Gecko) verfügt über eine Ähnliche „Masken“-Funktion, die ein SVG-Bild als Eingabe erfordert, das mithilfe der Base64-Kodierung eingebettet werden kann.

Das obige ist der detaillierte Inhalt vonWie blendet man Text mithilfe einer CSS-Verlaufsmaske in einen Hintergrund ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!