So legen Sie den Schriftfarbverlauf in CSS fest

So legen Sie den Schriftfarbverlauf in CSS fest: 1. Verwenden Sie „background-cli“ und „text-fill-color“, um den Schriftfarbverlauf festzulegen. 2. Verwenden Sie „mask-image“, um den Schriftfarbverlauf festzulegen „linearGradient, fill“ legt den Schriftfarbverlauf fest.

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, DELL G3-Computer

Drei Methoden zum Erzielen eines Textfarbverlaufs in CSS

UI-Designer im Prozess der Web-Front-End-Entwicklung Entwerfen Sie häufig einige Farbverläufe. Für Textdesignzeichnungen konnten wir in der Vergangenheit nur PNG-Bilder verwenden, um Text zu ersetzen. Heute können wir reines CSS verwenden, um Farbverlaufstexte zu realisieren. Hier sind 3 Implementierungsmethoden als Referenz!

Grundlegender Stil:

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

Die erste Methode: Verwenden Sie Hintergrund-Cli, Textfüllfarbe:

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

Anweisungen:

Hintergrund: -webkit-linear-gradient(…) für Textelemente. Bietet Hintergrund mit Farbverlauf.

webkit-text-fill-color: transparent Füllen Sie Text mit transparenter Farbe.

Webkit-Hintergrundclip: Text schneidet den Hintergrund mit Text aus und füllt den Text mit dem Verlaufshintergrund als Farbe.

Zweite Methode, mask-image verwenden:

.gradient-text-two{
   color:red;
}
.gradient-text-two[data-content]::after{
    content:attr(data-content);
    display: block;
    position:absolute;
    color:yellow;
    left:0;
    top:0;
    z-index:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

Erklärung:

mask-image ist dasselbe wie Hintergrundbild. Es kann nicht nur den Bildpfad, sondern auch die Verlaufsfarbe annehmen.

Die dritte Methode, linearGradient verwenden, füllen:

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}

<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>

Erklärung:

In SVG gibt es zwei Haupttypen von Farbverläufen
:
Linearer Farbverlauf (linearGradient)

Radialer Farbverlauf (radialGradient)

Farbverlauf in SVG kann nicht nur zum Füllen von grafischen Elementen, sondern auch von Textelementen verwendet werden

Das obige ist der detaillierte Inhalt vonSo legen Sie den Schriftfarbverlauf in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!