In CSS können Sie das Attribut „background-image“ und die Funktion „linear-gradient()“ verwenden, um den Hintergrundverlauf in zwei Richtungen festzulegen. Die Syntax lautet „element {background-image:linear-gradient(direction, Farbe 1, Farbe 2, Farbe 3}".
Die Betriebsumgebung dieses Tutorials: Windows10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie den Hintergrundverlauf mit CSS in zwei Richtungen ein
In CSS können Sie das Attribut „Hintergrundbild“ und die Funktion „Linear-Gradient“ verwenden, um Farbverläufe in zwei Richtungen zu erzielen. Das Attribut „Hintergrundbild“ legt ein Hintergrundbild für ein Element fest. )-Funktion wird verwendet, um eine Darstellung von zwei oder mehr Farbverlaufstypen zu erstellen.
Um einen linearen Farbverlauf zu erstellen, können Sie auch Farbverlaufseffekte in verschiedenen Richtungen (angegeben als Winkel) erzielen. . Wenn Sie keine Richtung angeben, ist der Standardverlauf von oben nach unten. Stellen Sie den Hintergrund nach oben auf Rot und nach unten auf Blau ein. Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div{
height: 200px;
width:300px;
background-image: linear-gradient(red,transparent,blue);
}
</style>
</head>
<body>
<p>从头部开始的线性渐变，从红色开始，转为透明，再到蓝色:</p>
<div></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing:CSS-Video-Tutorial
)Das obige ist der detaillierte Inhalt vonSo legen Sie den Hintergrundverlauf in CSS in zwei Richtungen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
