Question

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

GIVEN，EXiSTING CODE：

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，也没有任何颜色出现......只有改变浮动确实有效，这意味着id与#back-btn匹配所以它的其他东西......任何想法'？

非常感谢yoru的建议!!

Answer 1

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

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

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

1 个答案: