- 构建跨平台APP：jQuery Mobile移动应用实战（第2版） （跨平台移动开发丛书）
- 李柯泉
- 456字
- 2024-10-30 00:11:26
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的。