So verwenden Sie CSS3-Hintergrundfarben mit Farbverlauf, kompatibel mit IE9+

Hintergrundfarben können neben Volltonfarben auch verschiedene Farbkombinationen verwenden, um Hintergrundfarben mit Farbverlauf zu bilden und die Seite zu bereichern.

Verlaufshintergründe sind in zwei Typen unterteilt:

2. Kreisförmiger Verlauf; >

Linearer Farbverlauf

Der lineare Farbverlauf ist in drei Typen unterteilt: horizontale, vertikale und diagonale Farbverläufe

Syntax

:

= linear-gradient([ [ | to ] ,] ? [, ]+)

= [oben | ]

= Winkel>: Verwenden Sie den Winkelwert, um die Richtung des Farbverlaufs anzugeben.

nach links: Farbverlauf von rechts nach links einstellen;

nach rechts: Farbverlauf von links nach rechts einstellen;nach oben: Stellen Sie den Farbverlauf von unten nach oben ein;

nach unten: Stellen Sie den Farbverlauf von oben nach unten ein; >

: Legen Sie die Start- und Endfarben des angegebenen Farbverlaufs fest

: Geben Sie die Farbe an

: Verwenden Sie den Längenwert, um die Start- und Endpositionen der Farbe anzugeben. Negative Werte sind nicht zulässig

: Verwenden Sie den Prozentsatz, um die Start- und Endpositionen der Farbe anzugeben.

Hintergrund:linearer Gradient(Parameter 1, Parameter 2, Parameter 3, Parameter 4....Parameter N)

Parameter 1: Kann ausgefüllt oder nicht ausgefüllt werden. Wenn ausgefüllt, geben Sie die Richtung ein, z. B. nach rechts, was bedeutet, dass die Farbverlaufsrichtung von links nach rechts verläuft. Wenn nicht ausgefüllt, erfolgt der Farbverlauf von oben nach rechts standardmäßig unten.

Parameter 1': im Grunde das Gleiche wie Parameter 1, geschrieben mit dem Präfix -webkit-,-moz-,-o-, wie zum Beispiel: „Links“ stellt die Position dar, an der die Gradientenrichtung beginnt

Parameter 2: Startfarbe des Farbverlaufs. Sie können rgba() oder #fff oder Weiß eingeben, gefolgt von einem Prozentsatz, um den Anteil der Farbe darzustellen, z. B. #fff 50 % repräsentiert 50 % der weißen Farbe.

Parameter 3: Wenn später kein Parameter vorhanden ist, handelt es sich um die Endfarbe des Farbverlaufs, die mit dem optionalen Attribut von Parameter 2 übereinstimmt.

Parameter 4....Parameter N: Farbverlaufsknoten, der hinzugefügt werden kann. Die letzte ist die Abschlussfarbe des Farbverlaufs

Beispiel

:

Allerdings ist auch ein kompatibler Browser erforderlich:

linear-gradient(#fff, #75aaa3);
 linear-gradient(to bottom, #fff,#75aaa3); 
linear-gradient(to top, #75aaa3, #fff); 
linear-gradient(180deg, #fff, #75aaa3); 
linear-gradient(to bottom, #fff 0%, #75aaa3 100%);

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Hintergrundfarben mit Farbverlauf, kompatibel mit IE9+. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!