4.6　实现渐变的背景

前面的内容介绍了在页面中使用page控件的方法，也介绍了如何通过设置主题来让页面拥有不同的颜色，但很多时候，还需要更加绚丽的方式。直接使用CSS设置背景图片是一个非常好的方法，可是会造成页面加载缓慢。这时就可以使用CSS的渐变效果，具体实现方法如范例4-10所示。

【范例4-10　利用CSS样式实现页面背景的渐变】

运行结果如图4-11所示。

可以看出，页面中确实实现了背景的渐变，在jQuery Mobile中只要是可以使用背景的地方就可以使用渐变，如按钮、列表等。渐变的方式主要分为线性渐变和放射性渐变，本例中使用的渐变就是线性渐变。

由于各浏览器对渐变效果的支持程度不同，因此必须对不同的浏览器做出一些区分，如代码中第12~17行是针对WebKit内核浏览器而做的样式，而第18~23行则是针对Firefox的。

图4-11　线性渐变的背景