CSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung)-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

CSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung)

奋力向前

Aug 03, 2021 pm 05:43 PM

css

Im vorherigen Artikel „So erstellen Sie mit HTML ein prägnantes Einreichungsformular (detaillierte Code-Erklärung)“ habe ich Ihnen vorgestellt, wie Sie mit HTML ein Formular erstellen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS den Hintergrundfarbverlauf festlegen. Sehen wir uns an, wie das gemeinsam geht.

CSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung)

Sie können alle jede Farbe auf ihre eigene Art und Weise darstellen, nur aus verschiedenen Blickwinkeln.

Im RGB-Modus können alle Farben durch die Kombination verschiedener Energieverhältnisse von Rot, Grün und Blau erhalten werden.

Zum Beispiel:

rgb (100 %, 0 %, 0 %) ist rot;

rgb (100 %, 50 %, 0 %) ist orangerot;

rgb (80 %, 0 %, 100). %) ist lila.

Sie können diese Werte separat im Browser testen

root { background rgb(100% 0% 0%); }

rgb (100 %, 0 %, 0 %) kann auch als rgb (255, 0, 0) geschrieben werden, jede Primärfarbe ist in 255 unterteilt gleiche Teile.
0 bedeutet überhaupt keine Intensität, 255 bedeutet die höchste Intensität. Obwohl rgb(255,0,0) und rgb(100,0,0) beide rot sind, wirkt ersteres aufgrund seiner hohen Lichtintensität lebendiger als letzteres.
Das hat sich auch schwarz auf weiß bestens bewährt. Schwarz im RGB-Modus ist RGB (0, 0, 0) (alle drei geben kein Licht ab), während Weiß RGB (255, 255, 255) ist (alle drei geben das stärkste Licht ab).

So legen Sie den Div-Verlaufshintergrund mit CSS fest

1 Verwenden Sie ein div-Tag. div标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

2、header标签里面设置<div>标签。<pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css颜色渐变</title> <style type="text/css"> div{ } </style> </head> <body> <div> </div> </body> </html></pre><p>3、颜色渐变，需要给<code>div设定width和height，宽度和高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

4、然后设置div的background背景属性，背景颜色渐变就用到-webkit-linear-gradient。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient();
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

5、在-webkit-linear-gradient里面写top，设定渐变从顶部开始，到底部结束。写了top就不要写bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient(top);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

2. Setzen Sie das <div>-Tag innerhalb des <code>header-Tags.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient(top,white,lightblue,skyblue);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

3. Für den Farbverlauf müssen Sie width und height sowie width und height für div festlegen.

rrreee

4. Legen Sie dann das Hintergrundattribut div fest. Verwenden Sie -webkit-linear-gradient für den Hintergrundfarbverlauf.

rrreee CSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung) 5. Schreiben Sie top in -webkit-linear-gradient und stellen Sie den Verlauf so ein, dass er oben beginnt und unten endet. Wenn Sie top schreiben, schreiben Sie nicht bottom.

rrreee

6. Legen Sie die Farbverlaufsreihenfolge fest. Sie können weitere Farben festlegen. rrreeeDas Rendering ist wie folgt:

🎜🎜🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonCSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Verwandter Artikel

Draggin ' und Dropfen ' in ReactApr 17, 2025 am 11:52 AM

Das React -Ökosystem bietet uns viele Bibliotheken, die alle auf die Interaktion von Drag & Drop konzentrieren. Wir haben React-Dnd, React-beautiful-dnd,

Schnelle SoftwareApr 17, 2025 am 11:49 AM

In letzter Zeit gab es einige wunderbar miteinander verbundene Dinge über schnelle Software.

Verschachtelte Gradienten mit HintergrundclipApr 17, 2025 am 11:47 AM

Ich kann nicht sagen, dass ich das all das oft im Hintergrund-Clip verwende. I ' D Wette It ' wird in der täglichen CSS-Arbeit kaum jemals verwendet. Aber ich wurde in einem Posten von Stefan Judis daran erinnert,

Verwenden von RequestAnimationFrame mit React -HooksApr 17, 2025 am 11:46 AM

Die Animation mit RequestAnimationFrame sollte einfach sein, aber wenn Sie die Dokumentation von React nicht gründlich gelesen haben, werden Sie wahrscheinlich auf ein paar Dinge stoßen

Müssen Sie nach oben auf der Seite scrollen?Apr 17, 2025 am 11:45 AM

Vielleicht ist der einfachste Weg, dies dem Benutzer anzubieten, ein Link, der auf eine ID auf das Element abzielt. Also wie ...

Die beste API (GraphQL) ist eine, die Sie schreiben, die Sie schreibenApr 17, 2025 am 11:36 AM

Hören Sie, ich bin kein GraphQL -Experte, aber ich arbeite gerne damit. Die Art und Weise, wie es mir Daten als Front-End-Entwickler vorstellt, ist ziemlich cool. Es ist wie ein Menü von

Wöchentliche Plattform News: Textabstand Lesezeichen, Top-Level-Erwartung, neuer Verstärker-LadeindikatorApr 17, 2025 am 11:26 AM

In der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.

Verschiedene Methoden zur Erweiterung einer Schachtel und gleichzeitig den GrenzradiusApr 17, 2025 am 11:19 AM

I ' Ich habe kürzlich eine interessante Änderung auf Codepen bemerkt: Als es ein Rechteck mit abgerundeten Ecken auf der Homepage schwebt, expandieren Sie sich im Rücken.

See all articles