So erreichen Sie einen linearen Hintergrundverlauf in CSS3

Mary-Kate Olsen
Freigeben: 2021-12-16 13:59:00
Original
1935 Leute haben es durchsucht

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 ..)".

So erreichen Sie einen linearen Hintergrundverlauf in CSS3

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:

   123  

从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:

Nach dem Login kopieren

Ausgabeergebnis:

So erreichen Sie einen linearen Hintergrundverlauf in CSS3

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

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!