使用CSS3實現背景顏色漸層

這篇文章介紹使用CSS3實作背景色彩漸層 

CSS漸層色概念：

CSS漸層色(Gradients)能讓我們用一種色彩漸層的效果修飾一個空間——從一種顏色過渡到另一種顏色——填滿這個空間。漸層色有兩種形式：linear (線性漸層) 和 radial (環狀漸層)。很顯然CSS漸層(Gradients)技術是產生了一種視覺圖案效果，而實現這種視覺效果很簡單，能透過簡單程式實現。 CSS3裡很早就引進了CSS漸層(Gradients)，但這種技術的推廣卻經歷了很久。

 

CSS漸層色(Gradients)技術基本的語法：

統一程式碼格式

##

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

#第一個參數是漸變起始點或角。第二個參數是一種顏色停止點(color stops)。至少需要兩種顏色(起點和終點)，你可以加入任意種顏色來增加顏色漸層的豐富程度。對顏色停止點的

定義可以是一種顏色，或一種顏色加一個百分比：

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

下面的這段程式碼基本上包括了自頂向下顏色漸層的所有情況：

{	/* 底色 */
	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漸層色(Gradients)技術裡也支援帶有角度的漸層方向，如45度角方向漸層：

/* 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顏色漸層(Gradients)技術很有價值，但有時很難實現。有時你已經實現了想要的漸變，而瀏覽器的支援也會成為一個問題。以下是一些使用CSS顏色漸層(Gradients)的建議：

• 想讓你的CSS顏色漸層(Gradients)表現一定的透明度？使用 rgba 顏色。

• 使用背景色墊底，這樣防止瀏覽器不支援時不注意沒有任何顏色。

• 火狐瀏覽器和Google瀏覽器都支援repeating-linear-gradient 和 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);

效果：

基本的顏色線性漸變，自上而下

基本的色彩線性漸變，45度角(Chrome, Safari, Firefox, IE10, Opera)

 

#

以上是使用CSS3實現背景顏色漸層的詳細內容。更多資訊請關注PHP中文網其他相關文章！