Question

我正在为phonegap中的移动设备制作一个标签。我想添加图像作为选项卡的背景。问题是它不会添加任何背景图像。这是我的目录结构

图像在此文件夹中

www/img/tabs.png

在下面的CSS中我使用的路径是这样的url（./ img / tabs.png）左上角不重复;这不起作用。这是我的CSS文件

www/stylesheet/css/frames/footer.css

这是我的所有页面都位于

www/pages/home.html

这是我的css

footer {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    padding: 0;
    background: #535353; 
}

footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none; 
}

footer ul li {
    float: left;
    padding: 5% 10.9%;
    background: url(./img/tabs.png) top left no-repeat; 
}

footer ul li a {
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none; 
}

footer ul li a .current {
    background: url(./img/tabs.png) bottom left no-repeat; 
}

这是我的HTML

<header>
    Header
</header>
<section id="wrapper">
    <div id="scroll-content">

    </div>
</section>
<footer>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Photo</a></li>
    </ul>
</footer>

Answer 1

您的图片url不合适。

事实上，您提供给图片路径的url应该与CSS文件的位置相关。

所以，你需要使用：

url(../../../img/tabs.png)

而不是：

url(./img/tabs.png)

尝试让我知道这是否有效

如何在phonegap中使用css添加背景图像

1 个答案: