- 構建跨平臺APP：jQuery Mobile移動應用實戰（第2版） （跨平臺移動開發叢書）
- 李柯泉
- 456字
- 2020-11-28 23:45:48
4.6 實現漸變的背景
前面的內容介紹了在頁面中使用page控件的方法，也介紹了如何通過設置主題來讓頁面擁有不同的顏色，但很多時候，還需要更加絢麗的方式。直接使用CSS設置背景圖片是一個非常好的方法，可是會造成頁面加載緩慢。這時就可以使用CSS的漸變效果，具體實現方法如范例4-10所示。
【范例4-10 利用CSS樣式實現頁面背景的漸變】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href="jquery.mobile.min.css" />
07 <script src="jquery-2.1.4.min.js"></script>
08 <script src="jquery.mobile.min.js"></script>
09 <style>
10 .background-gradient
11 {
12 background-image:-WebKit-gradient( /*適用WebKit內核瀏覽器*/
13 linear, left bottom, left top, /*設置漸變方向縱向*/
14 color-stop(0.22, rgb(12,12,12)), /*上方顏色*/
15 color-stop(0.57, rgb(153,168,192)), /*中間顏色*/
16 color-stop(0.84, rgb(00,45,67)) /*底部顏色*/
17 );
18 background-image:-moz-linear-gradient( /*適用Firefox*/
19 90deg, /*角度為90°，即方向為上下
*/
20 rgb(12,12,12), /*上方顏色*/
21 rgb(153,168,192), /*中間顏色*/
22 rgb(00,45,67) /*底部顏色*/
23 );
24 }
25 </style>
26 </head>
27 <body>
28 <div data-role="page" class="background-gradient">
29 <! --頁面內容-->
30 </div>
31 </body>
32 </html>
運行結果如圖4-11所示。
圖4-11 線性漸變的背景
可以看出，頁面中確實實現了背景的漸變，在jQuery Mobile中只要是可以使用背景的地方就可以使用漸變，如按鈕、列表等。漸變的方式主要分為線性漸變和放射性漸變，本例中使用的漸變就是線性漸變。
由于各瀏覽器對漸變效果的支持程度不同，因此必須對不同的瀏覽器做出一些區分，如代碼中第12～17行是針對WebKit內核瀏覽器而做的樣式，而第18～23行則是針對Firefox的。