Ohne Emojis vom transparenten Textausschnitt

Dieser CSS -Trick erzeugt einen ordentlichen Schwebeffekt auf Links, indem ein linearer Gradientenhintergrund angewendet, ihn an den Text abgeschnitten und den Text transparent gestaltet wird. Dies wirkt sich jedoch unerwartet auf Emojis aus, was sie auch transparent macht. Dies ist zwar technisch korrekt (Emojis sind Glyphen), aber nicht immer wünschenswert.

Der Artikel untersucht Lösungen. Die Eigenschaften der CSS font-variation-emoji und font-palette , die in den CSS-Schriftarten Modul Level 4 vorgeschlagen wurden, sind derzeit nicht für dieses spezifische Problem geeignet. Eine reine CSS -Lösung scheint nicht verfügbar zu sein.

Der Autor schlägt zwei Problemumgehungen vor:

1. JavaScript: Große Plattformen wie WordPress und Twitter verwenden bildbasierte Emojis (häufig SVGs). Das Ersetzen von textbasierten Emojis durch Bilder würde den Transparenzeffekt verhindern. Dies erfordert benutzerdefinierte JavaScript, um Emojis zu erkennen und zu ersetzen.

2. Positionierung: Die einfachste Lösung besteht darin, das Emoji außerhalb der zu platzieren<a></a> Link -Tag. Dies verhindert, dass das CSS sie beeinflusst. Dies ist jedoch nur praktisch, wenn das Emoji am Anfang oder am Ende des Link -Textes konsequent positioniert ist. Mid-Link Emojis stellen eine Herausforderung dar.

Der Artikel kommt zu dem Schluss, dass eine einfache CSS -Lösung fehlt, aber die Notwendigkeit der Kontrolle über das Emoji -Styling in solchen Szenarien zeigt einen potenziellen Bereich für die zukünftige CSS -Entwicklung. Das Bild unten zeigt das Problem:

Das obige ist der detaillierte Inhalt vonOhne Emojis vom transparenten Textausschnitt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!