1

なぜこれは私のスプライト画像を黄色の縁取りボックスの背景として表示しないのですか？
ここに例があります：

誰かが私が何を変えるべきかについていくつかの例を持ってくることができれば、それは素晴らしいことです。

これが私のコードです：

HTML：

<div class="repeat">
    <div style='width:100%;'>
        <div style='float:left;margin-top:107px;margin-left:50px;width:80px;height:100px;border:1px solid yellow;'>
            <div class="menu">
                <ul id='nav'>
                    <li class='front'><a href='?p=front'>Front</a></li>
                </ul>
            </div>
        </div>
        <div style='float:left;margin-top:107px;margin-left:10px;width:80px;height:100px;border:1px solid yellow;'></div>
        <div style='clear:both;'></div>
    </div>
</div>

Css：

.repeat {
    float:left;
    width: 884px;
    height: auto;
    min-height:700px;
    background: url(images/repeat.png) repeat-y;
    z-index:2;
}

.menu {
    width:80px;
    height:100px;
    position:relative;
    }
    ul#nav {
        list-style: none inside;
        }
        ul#nav li {
            display: inline;
            }
            ul#nav li a {
                display: block;
                height: 40px;
                float: left;
                }
                ul#nav li.front  a{
                    width:80px;
                    background: url(images/menu/p1.png) top center no-repeat;
                    }               
                    ul#nav li a:hover {
                        background-position: bottom center;
                    }
                ul#nav li.front2  a{
                    width:80px;
                    background: url(images/menu/p1.png) bottom center no-repeat;
                }
4

3 に答える 3

2

スプライトは問題なく表示されています...
全体的な設定に表示されていないだけです。「ul＃navli.front a」セレクターに高さ：80pxを追加してみてください。そうすれば、どこが間違っているかがわかります。
そこから自分で試してみてください。

ヒント：ブラウザ開発ツール（私はChromeが好きです）を使用し、各要素にカーソルを合わせて、それらが占める領域を確認します。あなたの場合、「divmenu」と「lia」要素をチェックしてください。

于 2012-10-09T17:30:33.223 に答える
0

スプライトマップ（）の一部が空で、に設定されていることbackground-imageを除いて、は正常に表示されます。また、リストをリセットしていないため、子要素が奇妙にオフセットされます。center topno-repeat

改訂：

ul#nav { padding: 0; }

ul#nav li.front a {
      background: url("images/menu/p1.png") repeat-y center bottom transparent;
      width: 80px;
      height: 87px;
}

これはおそらくすべての問題を解決するわけではありません。マークアップとCSSから、何を達成しようとしているのかは明らかではありません。アンカータグを絶対的に配置することで、より良い結果が得られる可能性があります...または単にクリーンアップを実行します。

于 2012-10-09T17:31:49.230 に答える
0

これでうまくいくはずです。スタイルを設定したいボックスを対象としたルールはありませんでした。また、2つの間のギャップにまたがる単一の赤い画像が必要ない場合は、「ul＃navli.fronta」セレクターのルールを削除する必要があります。

.yellowBox
{
    float: left;
    margin-top: 107px;
    width: 80px;
    height: 100px;
    border: 1px solid yellow;
    background-image: url(images/menu/p1.png);
}

#box1
{
    margin-left: 50px;
}

#box2
{
    margin-left: 10px;
}


<div class="repeat">
    <div style="width:100%;">
        <div class='yellowBox' id='box1'>
            <div class="menu">
                <ul id="nav">
                    <li class="front"><a href="?p=front">Front</a></li>
                </ul>
            </div>
        </div>
        <div class='yellowBox' id='box2'></div>
        <div style="clear:both;"></div>
    </div>
</div>
于 2012-10-09T17:33:05.437 に答える