css - 在 jQuery Mobile 中为列表屏幕生成渐变效果？

Question

![在此处输入图片描述][1]我正在开发一个 jQuery 移动应用程序。是否有可能在我的列表屏幕上产生渐变效果？我当前的代码如下:

<div data-role="page" data-theme="a" data-content-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Header</h1>
 </div>
 <div class="content-primary" >
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
  <li>
    <h3><a href="#" style="text-decoration:none;color:#333333;">Sunday</a></h3>
    <p class="topic"><strong>Sub</strong></p>
    <p>Date</p>
  </li>
  <li>
    <h3><a href="#" style="text-decoration:none;color:#333333;">Monday</a></h3>
    <p class="topic"><strong>Sub </strong></p>
    <p>Date</p>
  </li>
  <li>
    <h3><a href="#" style="text-decoration:none;color:#333333;">Tuseday</a></h3>
    <p class="topic"><strong>Sub</strong></p>
    <p>Date</p>
  </li>
   </ul>
 </div>
 </div>

Answer 1

设置渐变背景为ui-listview，ui-btn的背景为transparent。

.ui-listview {
   background: -webkit-linear-gradient(top, #fc3232 0%, #ffd242 100%);
}

.ui-listview li .ui-btn {
   background: transparent;
}

Demo