css背景色漸變

1. 怎樣用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一致
更多的參數應用可以去度娘查詢,有很詳細參數使用示例

2. 用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這樣的多關鍵字方式來實現。

3. CSS怎樣實現背景顏色漸變

background:-webkit-gradient(linear ,10% 10%，100% 100%，

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)));

第一個參數：表示的是漸變的類型

linear線性漸變

第二個參數：分別對應x，y方向漸變的起始位置

第三個參數：分別對應x，y方向漸變的終止位置

第四/五/N個參數：設置漸變的位置及顏色

(2)第二種寫法：這種寫法比較簡單，而且效果比較自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

第一個參數：表示的是漸變的類型

linear線性漸變

第二個參數：分別對應x，y方向漸變的起始位置

第三個參數：分別對應x，y方向漸變的終止位置

第四個參數：設置了起始位置的顏色

二.Mozilla瀏覽器

(1)第一種寫法：

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一個參數：設置漸變起始位置及角度

第二/三/四/N個參數：設置漸變的顏色和位置

(2)第二種寫法：這種寫法比較簡單，而且效果比較自然

background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);

第一個參數：設置漸變的起始位置

第二個參數：設置起始位置的顏色

第三個參數：設置終止位置的顏色

三.IE 瀏覽器

IE瀏覽器實現漸變只能使用IE自己的濾鏡去實現

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一個參數：漸變起始位置的顏色

第二個參數：漸變終止位置的顏色

第三個參數：漸變的類型

0代表豎向漸變 1 代表橫向漸變

注意：這里設置背景的時候不需要給background設置，直接用filter即可，不要和其他的瀏覽器混淆

第五個參數：設置了終止位置的顏色

代碼演示：

4. 使用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手冊里查到。

5. css背景顏色怎麼實現漸變效果

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
實例
從上到下的線性漸變：
#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); /* 標準的語法 */
}
-----------------------------------------------------------------------
徑向漸變（Radial Gradients）- 由它們的中心定義
實例
顏色結點均勻分布的徑向漸變：
#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); /* 標準的語法 */
}

6. 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：望採納

7. 怎麼用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一致
更多的參數應用可以去度娘查詢,有很詳細參數使用示例.

8. 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 這樣的多關鍵字方式來實現。

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

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

10. css背景漸變幾種樣式

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