如何将 CSS 精灵背景实现到现有的 JavaScript 变量中？

Question

我想向现有按钮添加一个精灵图像，该按钮之前使用自己的图像“play.png”，我将其替换为“spacer.png”（该项目已在CSS中设置为30x35像素的固定大小）。目标是通过将所有此类 play/pause/ next/previous 按钮组合成一个来保存 http 请求单一 sprite.png 文件。

给定的现有代码：

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 匹配，所以它是其他东西...有什么想法吗？

Answer 1

除非绝对必要（即使用 Javascript 更改不透明度），否则您应该将样式保留在 CSS 文件中。将 CSS 文件添加到您的网站（或者使用现有文件（如果有）），然后添加以下声明：

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