Heim > Artikel > Web-Frontend > CSS3-Farbverlauf: Wie implementiert man einen Hintergrundfarbverlauf in CSS3?

CSS3-Farbverlauf: Wie implementiert man einen Hintergrundfarbverlauf in CSS3?

不言Original: 2018-09-15 13:42:2013372Durchsuche

Um die Schönheit von Webseiten zu verbessern, wird häufig ein CSS3-Hintergrundfarbverlauf verwendet. Wie stellt man also einen CSS3-Hintergrundfarbverlauf ein? In diesem Artikel stellen wir vor, wie Sie den CSS-Farbverlaufshintergrund festlegen.

Was wir wissen müssen, ist, dass es zwei Arten von CSS3-Verläufen gibt: CSS3-Linearverlauf und CSS3-Radialverlauf Schauen wir uns die Auswirkungen dieser beiden CSS3-Verläufe an, um einen Hintergrund zu erzielen Farbverläufe. Wie es ist.

1. Durch den linearen CSS3-Verlauf festgelegter Hintergrundfarbverlauf

Zunächst müssen wir wissen, dass das vom linearen CSS3-Verlauf verwendete Attribut linear ist. Gradient.

Syntax: linear-gradient(to bottom,colorStrat,colorEnd)

Parameterbedeutung:

Der erste Parameter gibt die Richtung des Farbverlaufs an

nach unten Von oben nach unten; unten rechts von oben links nach unten rechts; nach oben rechts von unten links nach oben rechts; von unten rechts nach oben links; nach links von rechts nach links; nach unten links von oben rechts nach unten links

Der zweite Parameter gibt die Startfarbe des Farbverlaufs an

Der dritte Parameter gibt die an Farbverlaufsfarbe Endfarbe

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

CSS3-Hintergrundfarbverlaufseffekt ist wie folgt:

CSS3-Farbverlauf: Wie implementiert man einen Hintergrundfarbverlauf in CSS3?

2. Hintergrundfarbverlauf durch CSS3-Radialverlauf festgelegt

Der radiale Farbverlauf wird durch seine Mitte definiert.

Um einen radialen Farbverlauf zu erstellen, müssen Sie außerdem mindestens zwei Farbknoten definieren. Farbknoten sind die Farben, die einen sanften Übergang darstellen sollen. Gleichzeitig können Sie auch den Mittelpunkt, die Form (Kreis oder Oval) und die Größe des Farbverlaufs festlegen. Standardmäßig ist die Mitte des Farbverlaufs Mitte (stellt den Mittelpunkt dar), die Form des Farbverlaufs ist eine Ellipse (stellt eine Ellipse dar) und die Größe des Farbverlaufs ist die am weitesten entfernte Ecke (stellt die am weitesten entfernte Ecke dar).

Das vom CSS3-Radialgradient verwendete Attribut ist radial-gradient.

Syntax: Hintergrund: radialer Farbverlauf (Formgröße an Position, Startfarbe, ..., letzte Farbe);

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

Der CSS3-Hintergrundfarbverlaufseffekt ist wie folgt:

Dieser Artikel über die CSS3-Linearität in CSS3 endet hier Weitere Informationen zu Farbverläufen und radialen CSS3-Verläufen finden Sie im

CSS3-Handbuch

Das obige ist der detaillierte Inhalt vonCSS3-Farbverlauf: Wie implementiert man einen Hintergrundfarbverlauf in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 position background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)Nächster Artikel：Was macht das Tabellenlayout-Attribut in CSS? Einführung in zwei Layoutmethoden für Tabellen (Codebeispiele)

In Verbindung stehende Artikel

Mehr sehen