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