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>