javascript - 如何将 CSS Sprite 背景实现到现有的 JavaScript 变量中？

Question

我想向现有按钮添加 Sprite 图像，该按钮以前使用自己的图像“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;
}

为什么 sprite 图像不显示？ 即使背景不是 F00 颜色那里也没有任何显示...只有更改 float 才有效意味着 id确实匹配 #back-btn 所以它是其他东西......有什么想法吗？

Answer 1

除非绝对必要(即使用 Javascript 更改不透明度)，否则您应该将样式保存在 CSS 文件中。将 CSS 文件添加到您的网站(或使用现有文件，如果有的话)，并添加以下声明:

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