So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein-CSS-Tutorial-php.cn

Einstellungsmethode: 1. Verwenden Sie die Anweisung „background:linear-gradient(verlaufsrichtung, Farbe 1, Farbe 2,..);“ 2. Verwenden Sie die Anweisung „background:radial-gradient(form size position, start color,. .) , Termination Color);“-Anweisung.

So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Verlauf

CSS3-Verläufe können sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen. Im Vergleich zur Verwendung von Verlaufsbildern können Farbverläufe die Downloadzeit und die Bandbreitennutzung reduzieren und sehen beim Vergrößern besser aus.

Linienverlauf

Farbwerte verlaufen allmählich entlang einer impliziten geraden Linie. Erstellt von linear-gradient(). linear-gradient() 产生。

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

Nach dem Login kopieren

语法

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

Nach dem Login kopieren

<angle>：用角度值指定渐变的方向（或角度）。角度顺时针增加。
<side-or-corner>：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度 和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<color-stop-list>：颜色变化列表。支持透明度（rgba(255,0,0,0.1)）。

示例：背景色线性渐变--background-image+linear-gradient()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--线性渐变</title>
		<style>
			.demo{
				width:500 ;
				height: 300;
				margin: 50px auto;
			}
			.demo *{
				width: 200px;
				height: 200px;
				margin: 20px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				font-size: 16px;
				float: left;
			}
			.demo1{
				/* 底色 */
				background-color: #fd0d0d;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
				/* chrome 10+, safari 5.1+ */
				background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* firefox; multiple color stops */
				background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
				/* ie 6+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;);
				/* ie8 + */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;)";
				/* ie10 */
				background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* opera 11.1 */
				background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* 标准写法 */
				background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

			}
			.demo2{
				/* 底色 */
				background-color:#d41a1a;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
				/* chrome 10+, safari 5.1+ */
				background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* firefox; multiple color stops */
				background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* ie10 */
				background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
				/* opera 11.1 */
				background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
				/* 标准写法 */
				background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">基本线性渐变--自上而下</div>
		    <div class="demo2">基本线性渐变--45度角</div>
		</div>
	</body>
</html>

Nach dem Login kopieren

So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein

径向渐变

radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）

语法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)

Nach dem Login kopieren

shape：椭圆形（ellipse，默认）或圆形（circle）
size：
- closest-side，渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
- closest-corner，渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
- farthest-side，与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
- farthest-corner，渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
position：可以是具体的两个位置偏移值（10% 20%），也可以是关键字（left、right、top、bottom）

示例：背景色径向渐变--background-image+radial-gradient()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--径向渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				background-image: -moz-radial-gradient(#ecff05, red);
				background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
				background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
				background-image: radial-gradient(#ecff05, red);
			}
			.demo2{
				background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
				background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
				background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

Nach dem Login kopieren

So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient()

Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbknoten definieren. Der Farbknoten ist die Farbe, die einen sanften Übergang anzeigen soll. Gleichzeitig können Sie auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--重复渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				    background: repeating-linear-gradient(
				    to top left,
				    lightpink,
				    lightpink 5px,
				    white 5px,
				    white 10px
				  );
			}
			.demo2{
				   background: repeating-radial-gradient(
				    powderblue,
				    powderblue 8px,
				    white 8px,
				    white 16px
				  );
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

Nach dem Login kopieren

Syntax So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein

rrreee

<angle>: Verwenden Sie den Winkelwert, um die Richtung (oder den Winkel) des Farbverlaufs anzugeben. Der Winkel vergrößert sich im Uhrzeigersinn.
<side-or-corner>: Beschreibt die Startpunktposition der Verlaufslinie. Die Werte nach oben, nach unten, nach links und nach rechts werden in den Winkel 0 Grad, 180 Grad, 270 Grad und 90 Grad. Die restlichen Werte werden von der oberen Mitte aus in einen Winkel im Uhrzeigersinn umgerechnet. Der Endpunkt der Verlaufslinie ist symmetrisch zum Mittelpunkt ihres Startpunkts.
<color-stop-list>: Farbänderungsliste. Unterstützt Transparenz (rgba(255,0,0,0.1)).

🎜🎜Beispiel: Hintergrundfarbe linearer Farbverlauf--background-image+linear-gradient()🎜🎜rrreee🎜 So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein

So stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein

🎜

🎜radialer Farbverlauf🎜🎜🎜`radialer Verlauf -gradient()` Die CSS-Funktion erstellt ein Bild, dessen Farbwerte sich von einem Mittelpunkt (dem Ursprung) nach außen ausbreiten und allmählich in andere Farbwerte übergehen. 🎜🎜Sie müssen außerdem mindestens zwei Farbknoten definieren und können auch die Mitte des Farbverlaufs (Standard ist der Mittelpunkt, `center`) und die Form (Standardellipse `ellipse), Größe (Standard <code>farthest-corner`, zeigt die am weitesten entfernte Ecke an) 🎜🎜🎜Syntax🎜🎜rrreee

`shape`: Ellipse (ellipse code>, Standard) oder kreisförmig (`circle`)

`size`:

`closest-side` ist die Kantenform des Farbverlaufs tangential zu der Seite des Containers, die dem Mittelpunkt des Farbverlaufs am nächsten liegt (Kreis) oder zumindest tangential zu den vertikalen und horizontalen Seiten, die dem Mittelpunkt des Farbverlaufs am nächsten liegen (Ellipse). ).

`closest-corner`, die Kantenform des Farbverlaufs schneidet die Ecke des Containers, die dem Mittelpunkt des Farbverlaufs am nächsten liegt.

`farthest-side`, Im Gegensatz zu close-side ist die Kantenform tangential zu der Seite des Containers, die am weitesten vom Mittelpunkt des Farbverlaufs entfernt ist (oder die am weitesten vertikal und horizontal entfernt ist). Seiten).

`farthest-corn`, die Kantenform des Farbverlaufs schneidet die Ecke des Containers, die am weitesten vom Mittelpunkt des Farbverlaufs entfernt ist.

🎜`position`: Es können zwei bestimmte Positionsversatzwerte sein (`10% 20%`), oder Können Schlüsselwörter sein (links, rechts, oben, unten)🎜

🎜🎜Beispiel: Hintergrundfarbe radialer Farbverlauf--background-image+radial-gradient()🎜🎜rrreee🎜🎜

🎜Verlauf wiederholen🎜🎜🎜Wiederholen Sie das Verlaufsmuster mehrmals, bis es ausreicht, um das angegebene Element zu füllen. Erzeugt durch die Funktionen `repeating-linear-gradient()` und `repeating-radial-gradient()`. 🎜🎜Die Parameter der Wiederholungsfunktion sind die gleichen wie oben, mit der Ausnahme, dass die Wiederholung auf der Grundlage eines Vielfachen der Verlaufslänge (dem Abstand zwischen der letzten und der ersten Farbskala) erfolgt. 🎜rrreee🎜🎜🎜🎜 (Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonSo stellen Sie den Hintergrund in CSS3 auf eine Verlaufsfarbe ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!