線性漸變的一般結構是： 

複製程式碼 程式碼如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 

其中各個瀏覽器渲染不同，又分為： 

Webkit: 

複製程式碼 程式碼如下:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 

漸變型別 - 在屬性裡-webkit-linear-gradient 
漸變從哪開始(top) 
顏色取值和在漸變中的位置 (rgba(0,0,0,0.1) 40%) 

下面的寫法是用於safari舊版本的 

複製程式碼 程式碼如下:
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));

漸變型別 (linear) 
漸變開始的X Y 軸座標(0 0 或者left-top) 
漸變結束的X Y 軸座標(0 100% 或者left-bottom) 
顏色取值 (color-stop(40%, rgba(0,0,0,0.1))) 

Mozilla: 

複製程式碼 程式碼如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 

Firefox渲染漸變的寫法和Safari大致相同，不同的是需要將漸變屬性改為-moz-linear-gradient 

Opera: 

複製程式碼 程式碼如下:
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 

按照上面的寫法，讓Opera瀏覽器渲染直接將屬性改為-o-linear-gradient，是不是很簡單？ 

IE: 

IE比較頑固，不支援漸變，但是提供了漸變濾鏡 

複製程式碼 程式碼如下:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000'); 

說了這麼多，大家對例子裡rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇？沒錯，解決這個頭疼問題的關鍵就是它 - 漸變透明度。設定漸變透明度（值從0.1-0.9）可以使漸變顏色處在不同值的透明度下，也就是說通過透明度，背景可以呈現不同透明度下的背景顏色。 

下面圖片是用上面程式碼生成的背景漸變： 

是不是看不出漸變透明（感覺灰灰的）？沒錯，因為顏色取值是從白到黑，那中間的過渡色自然就是灰色的了。但是如果你在加上一個背景顏色的話，那效果就出來了。 

比如我們加個background-color: #92D050： 

你只需要配置background-color, 就可以讓背景呈現不同的漸變色。 

完整的程式碼： 

複製程式碼 程式碼如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF)); 
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000'); 
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 
background-color: #669900; 

其中rgba()中的顏色(rgb)一般取白色（255，255，255）或者黑色（0,0,0）, 而透明度的設定就看你自己想要什麼樣的漸變效果了。 

下面是幾個不同漸變色的例子： 


複製程式碼 程式碼如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 



複製程式碼 程式碼如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%); 



複製程式碼 程式碼如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%); 

所以如果能很好的運用背景漸變的透明度，可以在很大程度上定義統一的背景漸變色，而使用者只需要輸入一個顏色域，就可以把主題配置成想要的漸變效果。不過遺憾的是，這種方法就現在而言，只能適用於背景漸變顏色相近的主題。多餘一種顏色的背景漸變還是得用這種寫法 

複製程式碼 程式碼如下:
background: linear-gradient(to bottom, #396E8E 0%, #336888 29%, #225777 67%, #194E6E 100%);