Question

我想添加一個精靈圖像到一個現有的按鈕，它以前使用自己的圖像「play.png」，我用「spacer.png」替換（這個項目已經設置爲一個固定的30x35像素在CSS中） 。目標是通過將所有這樣的播放/暫停/下一個/上一個按鈕組合成一個單獨的sprite.png文件來保存http請求。

給出現有代碼：

var $backBtn = $("<img src='" + LIGHTBOX_PATH + "spacer.png' id='back-btn'/>"); 
$backBtn.css({opacity:BUTTON_OPACITY}).hover(buttonOver, buttonOut); 

我說：

#back-btn{ 
    background: url(http://website.bla/sprite.png) no-repeat -770px -550px) #F00; 
    float:left; 
} 

爲什麼精靈圖像顯示不出來？即使背景不是F00彩色也沒有顯示那裏......只有改變浮點纔有意義，即id匹配＃back-btn，所以它的其他內容......任何想法「？

非常感謝yoru的建議！

Answer 1

除非絕對必要（例如，使用Javascript更改不透明度），否則應將樣式保留在CSS文件中。一個CSS文件添加到您的網站（或使用現有的文件，如果有的話），並添加如下聲明：

#back-btn { 
    float: left; 
    background: url(http://website.org/sprite.png) no-repeat -770px -550px; 
}