Question

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

如果有人可以提供一些我应该改变的例子，那就太棒了。

让我发布已经完成的帖子，需要更多的文字记录到此帖子中的代码 - .-

这是我的代码：

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;
                }

Answer 1

你的精灵显示得很好......
只是它在整体设置中不可见。尝试将高度：80px添加到“ul＃nav li.front a”选择器中，您将看到出错的位置。
从那里试试自己。

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

Answer 2

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中可以看出，您要实现的目标并不明显。

，你可能会对你的锚标签有一些绝对定位，或者只是进行一些清理

Answer 3

这应该这样做 - 没有针对您想要设置样式的框的规则。如果您不希望单个红色图像跨越两者之间的间隙，则需要删除“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>

不会显示精灵图像？

3 个答案: