CSS設定背景色漸變顯示
<style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/ } </style> <body> <div class="linear"></div> </body>
效果圖：
一：標題
使一個div曾的背景顏色出現漸變的，有的人使用美工切出來不同的顏色條，之後使用背景圖片填充 repeat-x.這裡使用css控制顏色的漸變，但是要注意：此處需要解決瀏覽的相容性問題
二、IE瀏覽器下的漸變背景
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
相關說明：
上面的濾鏡程式碼主要有三個引數，依次是：startcolorstr, endcolorstr, 以及gradientType。其中gradientType=1代表橫向漸變，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結尾的色彩。
上面程式碼實現的是紅色至藍色的漸變，但是不含透明度變化，這是由於IE目前尚未支援opacity屬性以及RGBA顏色，要實現IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強大，這種強大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。例如下面的使用：
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
其中各個引數的含義如下：
opacity表示透明度，預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個可選引數，如果想要設定漸變的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
style用來指定透明區域的形狀特徵：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開始處的 X座標。
starty 漸變透明效果開始處的 Y座標。
finishx 漸變透明效果結束處的 X座標。
finishy 漸變透明效果結束處的 Y座標。
綜合上述，實現IE下含透明度變化紅藍垂直漸變的程式碼如下：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}三、Firefox瀏覽器下的漸變背景
對於Firefox瀏覽器下(Firefox 3.6+)漸變背景的實現需使用CSS3漸變屬性，-moz-linear-gradient屬性，在之前文章我詳細介紹了Firefox3.6下漸變背景的實現，您有興趣可以狠狠地點選這裡：CSS漸變之CSS3 gradient在Firefox3.6下的使用。這裡我就不再具體講述了，對於本文開頭提到的要實現的效果的實現可以參見下面的程式碼：
.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
<div class="gradient"></div>
四、chrome/Safari瀏覽器下的漸變背景實現
對於webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸變背景的實現也是使用CSS3 漸變方法，css-gradient，具體為-webkit-gradient，使用語Firefox瀏覽器是有一些差異的。我在上上一篇文章對此進行了非常詳細的介紹，您可以狠狠地點選這裡：CSS gradient漸變之webkit核心瀏覽器下的使用 。具體使用就不詳述了，參見下面的程式碼：
.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
<div class="gradient"></div>
Opera11也支援了CSS3漸變。其用法與Firefox一致，需要使用-o-的字首。另外，Chrome的漸變用法也開始向FireFox瀏覽器下的用法靠攏。
五、綜合 – 相容性的漸變背景效果
相關程式碼如下：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/<span style="white-space:pre"> </span>
background:red; /* 一些不支援背景漸變的瀏覽器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
<div class="gradient"></div>相關材料來自於：http://blog.csdn.net/gingerredjade/article/details/12191741