Heim > Artikel > Web-Frontend > So erreichen Sie einen linearen Hintergrundverlauf in CSS3
So erreichen Sie einen linearen Hintergrundverlauf in CSS3
- WBOYOriginal
- 2021-12-16 13:59:001944Durchsuche
In CSS können Sie das Attribut „background-image“ und die Funktion „linear-gradient()“ verwenden, um einen linearen Verlauf des Elementhintergrunds zu erreichen. Die Syntax lautet „element {background-image:linear-gradient(gradient Richtung, Farbe 1, Farbe 2 ..)".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So implementieren Sie einen linearen Hintergrundverlauf in CSS3
Um einen linearen Verlauf des Elementhintergrunds in CSS zu erreichen, müssen Sie das Attribut „Hintergrundbild“ verwenden.
Das Attribut „Hintergrundbild“ wird verwendet, um den Hintergrundstil des Elements festzulegen. Wenn dieses Attribut mit der Funktion „linear-gradient()“ verwendet wird, kann der Hintergrund des Elements auf einen linearen Verlaufsstil festgelegt werden. Mit der Funktion
linear-gradient() wird ein Bild erstellt, das einen linearen Farbverlauf aus zwei oder mehr Farben darstellt.
Um einen linearen Farbverlauf zu erstellen, müssen Sie zwei Farben angeben. Sie können auch Farbverlaufseffekte in verschiedenen Richtungen erzielen (angegeben als Winkel). Wenn die Richtung nicht angegeben ist, erfolgt der Farbverlauf standardmäßig von oben nach unten.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 300px;
background-image: linear-gradient(red, yellow ,red);
}
</style>
</head>
<body>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erreichen Sie einen linearen Hintergrundverlauf in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!