Html 不会显示精灵图像吗？

为什么不显示我的精灵图像作为黄色边框框的背景？
这里有一个例子：

如果有人能举一些我应该改变的例子，那就太好了

这是我的密码：

Html:

---

你的雪碧表现得很好
只是它在整个设置中不可见。 尝试将高度：80px添加到“ul#nav li.front a”选择器，您将看到哪里出了问题
从那里试穿一下。

---

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

背景图像显示良好，除了spritemap的部分（

中间顶部

）为空，并且设置为

无重复

。此外，您还没有重置列表，这会使子元素奇怪地偏移

修订：

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中看不出您想要实现什么。你可能会有更好的路奇与一些绝对定位你的锚标签。。。或者只是做一些清理。

这应该可以做到-没有针对您想要样式化的框的规则。 如果你不想看到一个红色图像跨越两个图像之间的距离，你需要删除“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>

.yellowBox
{
浮动：左；
边缘顶端：107px；
宽度：80px；
高度：100px；
边框：1px纯黄色；
背景图像：url（images/menu/p1.png）；
}
#框1
{
左边距：50像素；
}
#框2
{
左边距：10px；
}

尝试将绝对url而不是相对url放入

背景：url（'images/menu/p1.png'）…

嗯？黄色边框框未设置背景图像。如您所见，Ul导航位于带有黄色边框的div内。。为什么他们不显示他们的背景呢？绝对url以“http://”开头。你的url计算文件相对于调用它的文件的位置。你的图像在你认为的位置吗？如果你在浏览器的地址栏中输入你的URL，图像是否真的存在？现在看我的代码Nix。我发现了如何显示背景。但是为什么要偏右呢？因为默认情况下，

ul

有一个

1em

的填充，您没有考虑到这一点。这就是为什么我的示例中的第一行将其重置为0。还有其他问题。有多个元素具有相同的

ID

（

ul#nav

）。

ID

必须是唯一的。

ul#nav { padding: 0; }

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

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