Kann Verlaufstext generiert werden, ohne jeden Buchstaben einzeln zu definieren?

Generator für Verlaufstext, ohne jeden Buchstaben zu definieren

Frage:

Gibt es eine Möglichkeit, Verlaufstext zu generieren, ohne jeden einzelnen Buchstaben anzugeben? Brief? Zum Beispiel so etwas wie unten:

.rainbow {
  background-image: linear-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>

Aber nicht mit Regenbogenfarben, sondern so etwas wie ein Farbverlauf von Weiß nach Grau.

Antwort:

Während die genaue Syntax für die Angabe von Farbstopps variieren kann, finden Sie hier ein ähnliches Beispiel mit einem Übergang von Weiß zu Grau/Hellblau Farbverlauf:

.rainbow2 {
  background-image: linear-gradient(to right, #E0F8F7, #585858, #fff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>


No rainbow text

Durch Anpassen der Farbstopps und ihrer Positionen können Sie benutzerdefinierte Farbverläufe für Ihren Text erstellen, ohne jeden Buchstaben fest codieren zu müssen.

Das obige ist der detaillierte Inhalt vonKann Verlaufstext generiert werden, ohne jeden Buchstaben einzeln zu definieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!