爲什麼我的css sprites不能工作？

#border #header-wrapper #header-wrapper-upper #social-top a { 
    float: left; 
    background: url('../images/social_media.png') no-repeat; 
    height: 35px; 
    text-decoration: none; 
    width: 35px; 
} 
#border #header-wrapper #header-wrapper-upper #social-top a.twitter { 
    background-position: 0 0; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.twitter:hover { 
    background-position: 0 - 35; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.facebook { 
    background-position: -35 0; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.facebook:hover { 
    background-position: -35 - 35; 
} 


#border #header-wrapper #header-wrapper-upper #social-top a.be { 
    background-position: -70 0; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.be:hover { 
    background-position: -70 - 35; 
}

這是我的css代碼，但是當我查看頁面時，它總是顯示a.twitter，當我懸停時沒有任何反應，它只是停留在一個.twitter。對於a.facebook也顯示a.twitter e.c.爲什麼我的css sprites不能工作？

下面是HTML代碼 -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>index</title> 
     <link rel="stylesheet" href="css/stylesheet.css" /> 
    </head> 
    <body> 
     <!-- Header background starts --> 
     <div id="header"></div> 
     <!-- Header Background ends --> 
     <!-- Middle content starts --> 
     <div id="border"> 
      <!-- Header Wrapper starts --> 
      <div id="header-wrapper"> 
       <!-- Header upper Part starts --> 
       <div id="header-wrapper-upper"> 
        <img src="images/logo.png" alt="Season Logo" title="Season logo" id="logo" /> 
        <div id="social-top"> 
         <a href="#" class="twitter">&nbsp;</a> 
         <a href="#" class="facebook">&nbsp;</a> 
         <a href="#" class="be">&nbsp;</a> 
        </div> 
       </div> 
       <!-- Header upper Part ends --> 
      </div> 
      <!-- Header Wrapper Ends --> 
     </div> 
     <!-- Middle Content ends --> 
    </body> 
</html>

任何線索？第一次使用精靈，所以我不太確定。沒有任何東西顯示在控制檯中。

的jsfiddle - http://jsfiddle.net/kEQUw/

來源

2012-07-14 y2ok

http://spritegen.website-performance.org/ – GTSouza 2012-07-14 18:38:19

請提供的jsfiddle。 for sprites參考[w3schools]（http://www.w3schools.com/css/css_image_sprites.asp） – RAN 2012-07-14 18:38:45

增加了jsfiddle的例子。 – y2ok 2012-07-14 18:42:36

添加 '像素' 到背景位置

前。

0 -35px
0 35px ...等等。

來源

2012-07-14 18:40:28 AdityaSaxena

並刪除減號後的空格。 – Rob 2012-07-14 18:41:30

哦，上帝，哈哈，謝謝！它拯救了我的一天。 :)總是想念一些小事。 – y2ok 2012-07-14 18:44:09

將盡快接受:)。 – y2ok 2012-07-14 18:45:45

在CSS中，減號和35之間是否真的有空格？您是否在驗證程序中檢查了CSS和HTML？

來源

2012-07-14 18:43:48 pcm

只是爲了記錄。由於your sprite的構建方式（圖標之間有空格），因此可以使用spritecow online tool來獲取精靈的每個元素的正確值。

所以，你的正確的代碼應該是：

#border #header-wrapper #header-wrapper-upper #social-top a { 
    float: left; 
    background: url('../images/social_media.png') no-repeat; 
    height: 32px; /* not 35 */ 
    width: 32px; 
    text-decoration: none; 
    display: block; /* NEW */ 
} 
#border #header-wrapper #header-wrapper-upper #social-top a.twitter { 
    background-position: -2px -3px; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.twitter:hover { 
    background-position: -2px -38px; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.facebook { 
    background-position: -52px -2px; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.facebook:hover { 
    background-position: -52px -37px; 
} 


#border #header-wrapper #header-wrapper-upper #social-top a.be { 
    background-position: -103px -2px; 
} 

#border #header-wrapper #header-wrapper-upper #social-top a.be:hover { 
    background-position: -103px -37px; 
}

來源

2012-07-14 18:54:31 JFK

爲什麼我的css sprites不能工作？

回答

相關問題