Verwenden Sie CSS3, um einen Hintergrundfarbverlauf zu implementieren

In diesem Artikelwird vorgestelltVerwendung von CSS3 zum Erzielen von Hintergrundfarbverläufen

CSS-Verlaufsfarbkonzept:

CSS-Verläufe (Verläufe) ermöglichen uns die Verwendung eines Farbverlaufseffekts verändert einen Raum – geht von einer Farbe in eine andere über – und füllt den Raum. Es gibt zwei Formen von Farbverläufen: linear (linearer Farbverlauf) und radial (kreisförmiger Farbverlauf). Offensichtlich erzeugt die CSS-Farbverlaufstechnologie (Gradients) einen visuellen Mustereffekt, und dieser visuelle Effekt ist sehr einfach und kann durch einfache Programmierung erreicht werden. CSS-Gradienten wurden sehr früh in CSS3 eingeführt, aber die Förderung dieser Technologie dauerte lange.

Grundlegende Syntax der CSS-Gradiententechnologie:

Einheitliches Codeformat

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

Die Der erste Parameter ist der Startpunkt oder Winkel des Gradienten. Der zweite Parameter ist ein Farbstopp. Es sind mindestens zwei Farben erforderlich (Startpunkt und Endpunkt). Sie können eine beliebige Farbe hinzufügen, um die Fülle des Farbverlaufs zu erhöhen. Die Definition eines Farbstopppunkts kann eine Farbe oder eine Farbe plus einem Prozentsatz sein:

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)

Der folgende Code Das Snippet umfasst grundsätzlich alle Situationen von Farbverläufen von oben nach unten:

{	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), 
　　　　　color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	
　　　　　/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	
　　　　 /* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
　　　　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";	
　　　　 /* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

CSS-Verlaufstechnologie unterstützt auch Winkel. Verlaufsrichtung, z. B. 45-Grad-Winkelverlauf:

/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
　　　　　color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

CSS-Farbverlaufstechnologie (Gradients) ist wertvoll, aber manchmal schwierig zu implementieren. Manchmal haben Sie den gewünschten Farbverlauf bereits implementiert und die Browserunterstützung kann zum Problem werden. Hier sind einige Vorschläge für die Verwendung von CSS-Farbverläufen (Verläufen):

• Möchten Sie, dass Ihre CSS-Farbverläufe (Verläufe) einen gewissen Grad an Transparenz aufweisen? Verwenden Sie RGBA-Farben.

• Verwenden Sie die Hintergrundfarbe als Unterseite, um zu verhindern, dass Sie versehentlich keine Farbe haben, wenn der Browser diese nicht unterstützt.

• Firefox und Google Chrome unterstützen beide den Repeating-Linear-Gradient und den Repeating-Radial-Gradient:

background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);

background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);

Effekt:

Grundfarbverlauf linear, von oben nach unten

Grundlegender linearer Farbverlauf, 45-Grad-Winkel (Chrome, Safari, Firefox, IE10, Opera)

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um einen Hintergrundfarbverlauf zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!