Question

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

如果有人能来与我应该改变什么一些例子，这将是伟大的..

只要让我发布媒体链接，需要在这个comapred到代码的文本发布-.-

这里是我的代码：

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

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 2

你的精灵是显示就好了......
只是，它不是在整体环境可见。 尝试添加高度：80px到你的“ul＃nav li.front一个”选择器，你会看到你错在哪里。
从那里试试你自己。

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

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>