Heim >Web-Frontend >HTML-Tutorial >So legen Sie den radialen Hintergrundverlauf in HTML fest
In HTML können Sie die Funktion radial-gradient verwenden, um einen radialen Farbverlauf festzulegen. Fügen Sie einfach „background:radial-gradient (Startposition, Form, Größe, Farbe, Farbe, Farbe)“ zum Hintergrundattribut des Elements hinzu.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Radialer Farbverlauf: Der Übergang von einem Punkt zu den umgebenden Farben.
Der radiale Farbverlauf ist wie in der Abbildung dargestellt:
Syntax: (Browser-Präfix muss hinzugefügt werden)
background: radial-gradient(center, shape, size, start-color, ..., last-color);
center: Die Position des Startpunkts des Farbverlaufs, der ein Prozentsatz sein kann, und der Standardwert ist Mitte der Grafik.
Form: Die Form des Farbverlaufs, Ellipse stellt eine Ellipse dar und Kreis stellt einen Kreis dar. Der Standardwert ist Ellipse. Wenn die Elementform ein quadratisches Element ist, werden Ellipse und Kreis gleich angezeigt.
Größe: In Bezug auf die Größe des radialen Farbverlaufs:
nächste Seite, nächstliegende Seite,
am weitesten entfernte Seite, am weitesten entfernte Seite,
nächste Ecke, nächste Ecke,
am weiteste Ecke, am weitesten entfernte Ecke,
Der Implementierungscode lautet wie folgt:
p{ width:500px; height:300px; margin:40px auto; background:-webkit-radial-gradient(center,closest-corner,red,yellow,green); }
Erweiterte Informationen:
Linearer Farbverlauf: Farbwechsel von einer Richtung in eine andere Richtung in eine andere Richtung
Syntax im Standardmodus (ohne Hinzufügen eines Browser-Präfixes):
background:linear-gradient(direction,color-stop1,color-stop2)
Erläuterung: Der Standardwert der Richtung ist nach unten, also nach unten ist, von oben nach unten
Stopp: die Verteilungsposition der Farbe, der Standardwert ist gleichmäßige Verteilung (gleichmäßige Verteilung)
Kompatibilitätsmodus-Syntax (Browser-Präfix hinzufügen):
background:-webkit-linear-gradient(direction,color-stop1,color-stop2)
Hinweis: Der Richtungswert kann dazu nicht hinzugefügt werden Der Wert stellt die Farbe dar. Beginnen Sie den Farbverlauf aus dieser Richtung, im Gegensatz zu oben.
Stopp: Die Verteilungsposition der Farbe, der Standardwert ist eine gleichmäßige Verteilung (gleichmäßige Verteilung).
Farbverlaufsrichtung: Die Farbverläufe nach oben und unten bzw. nach links und rechts Zuvor implementiert, werden wir als Nächstes den diagonalen Farbverlauf
1 von links nach rechts nach oben (Farbverlauf nach oben und unten)
2 nach links von oben nach rechts unten (diagonaler Farbverlauf) einführen der Winkel der Farbverlaufslinie
Zum Beispiel: Standardmodus: 40 Grad 40 Grad
Kompatibler Modus: 90 - 40 Grad
Linearer Farbverlauf: Farbverteilung (Farbbereichsgröße):
linearer Farbverlauf (Richtung, Farbe 1 20 %, Farbe 2 30 %, Farbe 3)
bis 20 % dieser Position ist immer noch die Farbe 1 außerhalb von 20 % und beginnt zu Farbe 2 zu wechseln
Der Code lautet wie folgt:
div{ width:500px; height:300px; margin:100px auto; background-image: -webkit-linear-gradient(left, red, yellow); }
Empfohlenes Lernen:
html Video-TutorialDas obige ist der detaillierte Inhalt vonSo legen Sie den radialen Hintergrundverlauf in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!