Der Hintergrundclip-Text wird nach Verwendung dieser Eigenschaft unterbrochen ⇐ HTML

[Guest]

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>:

Code: Select all

X
X
X
X
X
X
X
X
X
X
X

Für Animationszwecke muss ich position: relative verwenden (funktioniert in FireFox, aber nicht in Google Chrome oder Safari)
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
}

Ich habe Folgendes versucht:

• Mit inherit: all

Inherit in all verwenden

Code: Select all

color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

Ich habe keine interessante Antwort gefunden, also bin ich hier und stelle Fragen.