CSSのクラス/ IDでスプライトイメージを呼び出す方法はありますか？

Question

私は今、矢印やボタンのような非常に小さな画像を含むウェブサイトを作成しています。そして、それらの小さな画像をすべて同じスプライト画像に含める必要があります。

オンラインツールを使用してスプライトを作成しましたが、プロジェクトにスプライトを含めるためにスプライト内のさまざまなイメージを出力として表示するCSSファイルがあります。

そして私は私のhtmlファイル内のスプライト画像を取得するには、次の方法を使用することができます。

<div class='sprite arrow-down'></div> 

そして、私の質問はそれです。たとえば、私は現在、ドロップダウンセレクタの矢印イメージをスプライトに置き換えようとしています。

私のセレクタの元のコードは、このようにスタイリングされている間：

.newSelector select{ 
background: transparent url(../img/button/arrow.png) no-repeat right center;; 
width: 75px; 
text-align: center; 
color:#777777; } 

セレクタの背景は、画像のURLを使用していること。すべての小さな画像にローカルリンクを使用する代わりに、そのURLリンクをスプライト画像インジケータ（class/id）に置き換えるにはどうすればよいですか。もともとCSSファイルのurlを呼び出す画像がたくさんあるので、今はすべてスプライト画像に置き換える必要があります。しかし、私はどのようにCSSファイルかjavascriptファイルでそれを動作させることはできません。親切に私に指示や提案をお願いします。ここ!!

Answer 1

お時間をどうもありがとうございますbackground-position

画像は、この矢印の配列を有し、使用するいくつかの基本的なコードです：CSSでv-<->-^

クラスはwidth * indexで算出した配列位置に背景を持っているが。あなたのスプライトが大きすぎる成長する場合は、簡単にSASS http://sass-lang.com/のループ

.sprite { 
 
    width: 80px; 
 
    height: 160px; 
 
    background: transparent url(https://placeholdit.imgix.net/~text?txtsize=110&bg=FF6347&txtclr=ffffff&txt=v-<->-^&w=350&h=160) no-repeat; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.arrow-down { 
 
    background-position: 0 0; 
 
} 
 
.arrow-left { 
 
    background-position: -80px 0; 
 
} 
 
.arrow-right { 
 
    background-position: -160px 0; 
 
} 
 
.arrow-up { 
 
    background-position: -240px 0; 
 
} 
 
img { display: block }

<img src='https://placeholdit.imgix.net/~text?txtsize=110&bg=FF6347&txtclr=ffffff&txt=v-<->-^&w=350&h=160' /> 
 
<div class='sprite arrow-up'></div> 
 
<div class='sprite arrow-down'></div> 
 
<div class='sprite arrow-left'></div> 
 
<div class='sprite arrow-right'></div>