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

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

奋力向前

Freigeben： 2021-08-03 18:19:47

Original

14962 Leute haben es durchsucht

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%); }

Nach dem Login kopieren

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>

Nach dem Login kopieren

2、header标签里面设置<div>标签。

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

Nach dem Login kopieren

3、颜色渐变，需要给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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

2. Setzen Sie das <div>-Tag innerhalb des 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>

Nach dem Login kopieren

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!