Der Hintergrundclip-Text wird nach Verwendung dieser Eigenschaft unterbrochen
Posted: 05 Jan 2025, 07:09
Ich habe ein Problem mit einem Hintergrundclip:Text, der nach der Verwendung von „relativ“ ohne erkennbaren Grund abbricht. Text ist vorhanden, aber die Farbe wird aufgrund der Füllfarbe des Webkits transparent dargestellt, aber er wird nicht gerendert Der Textverlauf, der nach der relativen Position erwartet wurde. Nach dem Entfernen von „Position Relative“ funktioniert es perfekt und ich muss es verwenden
das ist mein Dummy-Code:-
Hier ist also mein Code in HTML< /code>:
Für Animationszwecke muss ich position: relative verwenden (funktioniert in FireFox, aber nicht in Google Chrome oder Safari)
Hier ist das CSS:
Ich habe Folgendes versucht:
Ich habe keine interessante Antwort gefunden, also bin ich hier und stelle Fragen.
das ist mein Dummy-Code:-
Hier ist also mein Code in HTML< /code>:
Code: Select all
X
X
X
X
X
X
X
X
X
X
X
Hier ist das CSS:
Code: Select all
.internaltext{
position: relative;
}
.colormanager {
font-family:, Verdana, Arial, Helvetica, sans-serif;
font-weight: 600;
position: relative;
top: 0;
white-space: none;
margin-top: 15px;
color:transparent;
background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0;
display: flex;
flex-direction: row;
font-size: 15px;
padding-left: 20px
}
- Mit inherit: all
Code: Select all
color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;