Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben

Vor CSS3 konnten Verlaufsbilder nur als Hintergrundbilder verwendet werden
Durch die Gradientensyntax von CSS3 können wir den Aufwand für das Herunterladen von Bildern einsparen und beim Ändern der Browserauflösung bessere Effekte erzielen.

Farbwert RGBA

Der uns bekannte RGB-Farbstandard besteht aus den drei Farben r (Rot), g (Grün) und b (Blau), die verschiedene Farben mit Werten von 0 bis 255 oder 0 bis 100 % bilden.

RGBA fügt RGB einen Alpha-Opazitätsparameter hinzu.

Beispiel 1: Normale rote RGB-Farbe

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: rgb(255, 0, 0);
}

Beispiel 2: Verwenden von RGBA zum Erstellen eines roten durchscheinenden Effekts

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: rgba(255, 0, 0, 0,5);
}

Der Alphawert liegt zwischen 0 und 1. Je kleiner der Wert, desto transparenter ist es. Im Allgemeinen ist 0,2-0,5 der gebräuchlichste Wert.

Linearer Farbverlauf

Farbverlauf bedeutet „Neigung“, linear bedeutet „linear“. Farbverlauf ist ein sanfter Übergang zwischen mehreren Farben, der eine wunderschöne Farbe ergibt. Die Parameter für lineare Farbverläufe umfassen die Richtung des Farbverlaufs (optional) und eine beliebige Anzahl von Farbverläufen.

Beispiel 3: Rote, grüne und blaue Farbverläufe

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: linearer Farbverlauf (rot, hellgrün, blau);
}

Beachten Sie, dass ich hier Hintergrund geschrieben habe, nicht Hintergrundfarbe
(Tatsächlich ist die Verlaufsfarbe eine Funktion des Hintergrundbildes)

Wenn die Farbverlaufsrichtung nicht ausgefüllt ist, verläuft sie standardmäßig von oben nach unten.

Die Gradientenrichtung hat die folgenden Eigenschaftswerte
nach oben, nach unten (Standard), nach links, nach rechts
nach oben links, nach oben rechts, nach unten links, nach unten rechts
Oder füllen Sie den Winkel xxxdeg aus
Beispielsweise bedeutet „Nach oben links“, dass die Richtung nach links oben ist.

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: linearer Farbverlauf (nach oben links, Rot, Hellgrün, Blau);
}

Winkel 0 Grad entspricht nach oben, eine Vergrößerung des Winkels entspricht einer Drehung im Uhrzeigersinn

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: linearer Farbverlauf (20 Grad, Rot, Hellgrün, Blau);
}

Sie können die Position jedes Farbverlaufs nach jeder Farbe hinzufügen

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: linearer Farbverlauf (Rot 30 %, Hellgrün 50 %, Blau 70 %);
} 

Wenn Sie es nicht ausfüllen, teilt der Browser es standardmäßig gleichmäßig auf. Beispielsweise sind die drei Farbwerte standardmäßig 0 %, 50 % und 100 %.

Es gibt auch eine ungewöhnliche Funktion repeating-linear-gradient, die es uns ermöglicht, den linearen Gradienten zu wiederholen

.demo {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: sich wiederholender linearer Farbverlauf (rot, rgba (100,100,100,0,5), blau 50 %);
}

Das Ergebnis ist diese hässliche Verlaufsfarbe.

radialer Farbverlauf

radial bedeutet „radial, strahlend“
Es handelt sich um einen Farbverlauf, der vom Zentrum aus nach außen verläuft.

.demo {
    Breite: 200px;
    Höhe: 100px;
    Hintergrund: radialer Farbverlauf (rot, hellgrün, blau);
}

Ähnlich wie linearer Farbverlauf, aber der erste Parameter (optional) ist die Form des radialen Farbverlaufs. Die Position kann Kreis oder Ellipse sein (Standard).

.demo {
    Breite: 200px;
    Höhe: 100px;
    Hintergrund: radialer Farbverlauf (Kreis, Rot, Hellgrün, Blau);
}

Sie können die Form im Positionsformat verwenden, um die Position des Verlaufszentrums zu definieren.

.demo {
    Breite: 200px;
    Höhe: 100px;
    Hintergrund: radialer Farbverlauf (Kreis bei 30 % 30 %, Rot, Hellgrün, Blau);
}

Die Gradientenposition kann in Prozent oder Pixelform ausgedrückt werden. Wenn nur ein Wert eingegeben wird, wird der andere Wert standardmäßig auf die mittlere Position 50 % gesetzt.

.demo {
    Breite: 200px;
    Höhe: 100px;
    Hintergrund: radialer Farbverlauf (Kreis bei 30 %, Rot, Hellgrün, Blau);
}

Wenn Sie keine Schlagwörter verwenden möchten, können Sie für die Farbverlaufsgrößen auch Zahlen verwenden.

.demo {
    Breite: 200px;
    Höhe: 100px;
    Hintergrund: radialer Farbverlauf (100px 100px bei 50px 50px, rot, hellgrün, blau);
}

Gibt die Farbverlaufsgröße 100px*100px und die Farbverlaufsposition 50px*50px an.

Der radiale Gradient hat auch eine wiederholte Gradientenfunktion, die dem linearen Gradienten ähnelt. Ich werde es hier nicht erklären.

.demo {
    Breite: 200px;
    Höhe: 100px;
    Hintergrund: sich wiederholender radialer Farbverlauf (Rot 10 %, Hellgrün 20 %, Blau 30 %);
}

Dies ist das Ende dieses Artikels über die Verwendung von CSS3-Farbwerten RGBA und Farbverläufen. Weitere relevante CSS3-RGBA- und Farbverläufe-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!