Wie kann ich ein Sprite-Bild nach Klasse/ID in CSS aufrufen?

Question

Ich erstelle jetzt eine Website, die sehr kleine Bilder wie Pfeile und Knöpfe enthält. Und ich muss all diese winzigen Bilder in das gleiche Sprite-Bild einfügen.

Ich habe ein Online-Tool verwendet, um das Sprite zu erstellen, und ich habe eine CSS-Datei, die verschiedene Bilder in Sprite als Ausgabe angibt, um sie in mein Projekt aufzunehmen.

Und ich kann die folgende Art und Weise verwenden, um das Sprite-Bild in meiner HTML-Datei abrufen:

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

Und meine Frage, was ist. Ich versuche zum Beispiel, ein Pfeilbild meiner Dropdown-Auswahl mit meinem Sprite zu ersetzen.

Während die ursprüngliche Codierung für meine Wähler wird auf diese Weise Styling:

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

, dass der Hintergrund des Wählers die Bild-URL verwendet. Wie kann ich diese URL-Verknüpfung durch den Sprite-Bildindikator (Klasse/ID) ersetzen, anstatt lokale Verknüpfungen für alle kleinen Bilder zu verwenden? Weil ich viele Bilder habe, die ursprünglich von der URL in der css-Datei aufgerufen werden, und jetzt muss ich sie alle durch das Sprite-Bild ersetzen. Aber ich habe keine Ahnung, wie ich es in einer CSS-Datei oder sogar einer Javascript-Datei bearbeiten kann. Bitte geben Sie mir bitte eine Wegbeschreibung oder Anregungen. Vielen Dank für Ihre Zeit !!

Answer 1

Hier einige grundlegenden Code, background-position

Das Bild verwendet hat diese Pfeilfolge: v-<->-^

Die Klassen in CSS haben Hintergründe in Sequenzposition mit width * index berechnet. Wenn Ihr Sprite zu groß wird, können Sie einfach lösen sie mit einer Schleife in 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>