既存のJavascript変数にCSSスプライトバックグラウンドを実装するにはどうすればよいですか？

Question

私は以前に独自の画像 "play.png"を使用していた既存のボタンにスプライトイメージを追加したいと思います（このアイテムは既にcssの30x35ピクセルの固定ソートに設定されています） 。目標は、すべてのそのようなプレイ/パウゼ/次/前のボタンを組み合わせて1つの特異な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にマッチするという効果があります。

よろしくお願いします。

Answer 1

あなたのスタイルは、必要な場合を除いてCSSファイルに保存する必要があります（つまり、JavaScriptで不透明度を変更するなど）。あなたのウェブサイトにCSSファイルを追加します（またはお持ちの場合は、既存のファイルを使用）、および次の宣言を追加します。

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