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-Tutorial

Das 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!