css漸變背景色

① CSS3樣式中如何讓背景漸變與背景圖片共存

目前，對CSS3支持日趨完善，實現兼容性的漸變背景效果是完全可以的，讓背景漸變與背景圖片共存的方法很簡單，主要要注意的是圖片要 保持「最小單元」的准則，選擇正確的瀏覽器，該問題就能得到解決，下面介紹一下具體的解決方法。

② css背景漸變幾種樣式

有兩種樣式,一種是線性漸變,一種是徑向漸變
線性漸變:background:linear-gradient(0deg,red,orange);0deg意思是漸變角度為0°
徑向漸變:background:linear-gradient(circle,red 0%,orange);circle的意思是徑向漸變的形狀是圓形,eclipse是橢圓形(默認) 0%表示調整徑向漸變顏色節點不均勻分布.

③ CSS如何使用漸變背景（linear-gradient）實現下劃線

background: linear-gradient(to right,#60B1F3 0,#60B1F3 16%, #DCDCDC 0,#DCDCDC 100%)
我現在才學到這里，不過我查了下資料自己會弄了。第二個色塊從0到開始到自己的終止百分比就不會產生漸變了。
例：background: linear-gradient(to right,色塊1 0,色塊1 16%, 色塊2 0,色塊2 100%)

④ div背景顏色怎樣漸變 css實現div層背景顏色漸變代碼

1. CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。

2. CSS3 定義了兩種類型的漸變（gradients）：線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向與徑向漸變（Radial Gradients）- 由它們的中心定義

3. 線性漸變：

3.1、從上到下的線性漸變：

#grad {

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 標準的語法 */

}

3.2、從左到右的線性漸變：

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 標準的語法 */

}

3.3、線性漸變 - 對角：

#grad {

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */

}

4.徑向漸變：

4.1、顏色結點均勻分布的徑向漸變：

#grad {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: radial-gradient(red, green, blue); /* 標準的語法 */

}

4.2、顏色結點不均勻分布的徑向漸變：：

#grad {

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */

}

4.3、形狀為圓形的徑向漸變：

#grad {

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */

}

5：望採納

⑤ 怎麼用css設置DIV背景色漸變顯示

在Mozilla 下
background: -moz-linear-gradient( top,#ccc,#000);
參數說明
1,起點位置top 是從上到下,left是從左到右,left top是左上到右下
2,開始顏色,
3,結束顏色
在Webkit下
-webkit-linear-gradient(top,#ccc,#000);
參數與mozilla一致
在 Opera 下
background: -o-linear-gradient(top,#ccc, #000);
數與mozilla一致
更多的參數應用可以去度娘查詢,有很詳細參數使用示例.

⑥ 如何CSS實現網頁背景三種顏色漸變效果

純css是靜態的不可能實現漸變什麼的，必須用JavaScript或jQuery之類的
我用jQuery
http://www.phpstudy.net/e/tiy/ii.php?q=jquery_effect_toggle_function
這是w3c的那個實例，我也做過現在找不到了，抱歉了

⑦ css如何實現真正的網頁漸變背景

在background-image屬性中使用linear-gradient（）。
background-image：<bg-image> [ , <bg-image> ]
<bg-image> = <image> | none
默認值：none
適用於：所有元素
繼承性：無
動畫性：否
計算值：指定值
取值：
none：無背景圖。
<image>：使用絕對或相對地址指或者創建漸變色來確定圖像。

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值：
下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：
<angle>：
用角度值指定漸變的方向（或角度）。
to left：
設置漸變為從右到左。相當於: 270deg
to right：
設置漸變從左到右。相當於: 90deg
to top：
設置漸變從下到上。相當於: 0deg
to bottom：
設置漸變從上到下。相當於: 180deg。這是默認值，等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色：
<color>：
指定顏色。
<length>：
用長度值指定起止色位置。不允許負值
<percentage>：
用百分比指定起止色位置。
說明：
用線性漸變創建圖像。
如果想創建以對角線方式漸變的圖像，可以使用 to top left 這樣的多關鍵字方式來實現。

⑧ 用CSS如何設置網頁漸變背景

在background-image屬性中使用linear-gradient（）。
background-image：<bg-image>[,<bg-image>]
<bg-image>=<image>|none
默認值：none
適用於：所有元素
繼承性：無
動畫性：否
計算值：指定值
取值：
none：無背景圖。
<image>：使用絕對或相對地址指或者創建漸變色來確定圖像。

<linear-gradient>=linear-gradient([[<angle>|to<side-or-corner>],]?<color-stop>[,<color-stop>]+)
<side-or-corner>=[left|right]||[top|bottom]
<color-stop>=<color>[<length>|<percentage>]?
取值：
下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：
<angle>：
用角度值指定漸變的方向（或角度）。
toleft：
設置漸變為從右到左。相當於:270deg
toright：
設置漸變從左到右。相當於:90deg
totop：
設置漸變從下到上。相當於:0deg
tobottom：
設置漸變從上到下。相當於:180deg。這是默認值，等同於留空不寫。
<color-stop>用於指定漸變的起止顏色：
<color>：
指定顏色。
<length>：
用長度值指定起止色位置。不允許負值
<percentage>：
用百分比指定起止色位置。
說明：
用線性漸變創建圖像。
如果想創建以對角線方式漸變的圖像，可以使用totopleft這樣的多關鍵字方式來實現。

⑨ 使用div+css實現背景顏色漸變，怎麼實現呢

如果只要求抄兼容高級瀏覽器，CSS3可以解決。

<divclass="box"></div>

.box{width:500px;height:100px;background-image:-moz-linear-gradient(top,#45B5DA,#0382AD);background-image:-webkit-gradient(linear,50%0%,50%100%,from(#45B5DA),to(#0382AD));background-image:-o-linear-gradient(top,#45B5DA,#0382AD);}

如果要兼容低級瀏覽器，例如IE6，還是用背景圖片重復吧。

上面的這屬性可以在CSS手冊里查到。

⑩ 怎樣用CSS實現背景顏色縱向漸變

在來Mozilla 下
background: -moz-linear-gradient( top,#ccc,#000);
參數說明
1,起點位置自top 是從上到下,left是從左到右,left top是左上到右下
2,開始顏色,
3,結束顏色
在Webkit下
-webkit-linear-gradient(top,#ccc,#000);
參數與mozilla一致
在 Opera 下
background: -o-linear-gradient(top,#ccc, #000);
數與mozilla一致
更多的參數應用可以去度娘查詢,有很詳細參數使用示例