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

你的 Sprite 显示得很好......
只是它在整体设置中不可见。尝试将 height: 80px 添加到您的“ul#nav li.front a”选择器中，您将看到哪里出错了。
从那里尝试自己。

提示：使用您的浏览器开发工具（我更喜欢 Chrome）并将鼠标悬停在每个元素上以查看它们占据的区域。在您的情况下，请检查“div menu”和“li a”元素。

于 2012-10-09T17:30:33.223 回答
0

显示background-image正常，除了 spritemap ( center top) 的一部分是空的，并且它设置为no-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

应该这样做 - 没有针对您想要样式的框的规则。而且，如果您不想要跨越两者之间间隙的单个红色图像，则需要删除“ul#nav li.front a”选择器的规则。

.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 回答