5

phonegapでモバイルデバイス用のタブを作成しています。タブの背景として画像を追加したい。問題は、背景画像を追加しないことです。ここに私のディレクトリ構造があります

画像はこのフォルダにあります

www/img/tabs.png

以下の css では、この url(./img/tabs.png) top left no-repeat; のような画像へのパスを使用しています。これは機能しません。ここに私の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>
4

1 に答える 1

14

あなたの画像urlは大丈夫ではありません。

実際、url画像のパスに指定するのは、CSSファイルの場所に関連している必要があります。

したがって、次を使用する必要があります。

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

それ以外の：

url(./img/tabs.png)

試してみて、これが機能するかどうか教えてください

于 2012-09-20T07:53:54.747 に答える