0

基本上我正在尝试设置背景颜色（或图像）。我正在用 HTML CSS 和 JQuery Mobile 编写。

我正在尝试创建一个基本的 AppMobi 应用程序，但在以下示例中我似乎无法更改我的背景：

    <div data-role="page" id="page">
    <div data-role="header" data-theme="c">
        <h1>Page One</h1>
    </div>
    <div data-role="content" data-theme="c">    
        <ul data-role="listview" data-theme="b">
            <li><a href="#page2">Page Two</a></li>
            <li><a href="#page3">Page Three</a></li>
            <li><a href="#page4">Page Four</a></li>
            <li><a href="#page3" data-role="button" data-icon="delete">Delete</a></li>
        </ul>       
    </div>
    <div data-role="footer" style="position:fixed; bottom:0;" data-theme="c">
        <h4>Page Footer</h4>
    </div>
</div>

我曾尝试同时更改 HTML 和 CSS 中的背景，但我似乎无法更改第 1 页的背景颜色（示例）。第 1 页包括 4 个按钮和一个“粘性页脚”。按钮显示在屏幕顶部，但按钮或列表和页脚之间的内容不会改变颜色。我尝试在 Header 和内联中编写 HTML 或 CSS。

我怎样才能改变这个“div”块的背景颜色？

提前感谢

4

2 回答 2

1

您的问题与 AppMobi 无关，而与 JQuery Mobile 无关。

JQuery Mobile 的工作方式是加载内容，然后“处理”它并应用样式。发生的事情是 JQuery Mobile 覆盖了您的默认 CSS 样式。打开 JQuery Mobile CSS 文件并在那里进行更改。

于 2011-10-02T23:28:10.957 回答
0

在标准示例应用程序中，这里是 index.html 中设置背景的代码块。

/* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }

您可以看到只是设置了位于 images 目录中的名为 background.jpg 的图像。您可以编辑该背景图像，获取一个新的并指向它，或者输入一些漂亮的 webkit 代码或其他东西：（index.html 的头部标签）

<style type="text/css">
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 8); }
        input, textarea  { -webkit-user-select:text; } 
        body  
        {
            font-family:Arial;font-size:24pt;font-weight:bold;  
            background: 
            -webkit-gradient(radial, 50% 60%, 0, 53% 50%, 50, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.15)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 40% 50%, 0, 40% 55%, 25, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8D4212), to(#28580C), color-stop(.5,#DA881B));
            background-size: 400px 400px, 470px 470px, 600px 600px, 300px 300px, 100% 100%;
            background-color: #28580C;
        }
    </style>

因此，您应该能够为您的 Page 1 div 提供一个 id，然后将图像或您想要的任何其他内容应用于该 div id。

于 2011-09-30T14:17:53.650 回答