a {
background: url(sprite.png) no-repeat;
display: block;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}Die festgelegte Höhe und Breite stellen sicher, dass nur ein Teil der sprite.png-Grafik angezeigt wird. Der Rollover verschiebt die Position des Hintergrundbildes und enthüllt einen anderen Bereich der Grafik.
Sehen Sie sich den Pen KBjZwg von Geoff Graham (@geoffgraham) auf CodePen an.
Es wäre vielleicht sinnvoll, Folgendes hinzuzufügen:
a {text-indent: -9000px;}Ja, das ist notwendig, wenn Sie den Text ausblenden und nur das Bild anzeigen möchten. Nur weil es ein Sprite ist, bedeutet das nicht automatisch, dass dies die Absicht ist.
a {
display: block;
text-indent: -10000px;
background: url(sprite.png) no-repeat;
background-position: center top;
}
a:hover {
background-position: center bottom;
}
Vlad, das [background-position]-Attribut ist nicht notwendig, Sie können die Position "center top" einfach an das bereits deklarierte background-Attribut anhängen.
Sind das nicht einfach eine Fülle von netten Ressourcen!!!
//* das ist Vlads Code*//
a {
display: block;
text-indent: -10000px;
background: url(sprite.png) no-repeat;
background-position: center top;
}
a:hover {
background-position: center bottom;
}
//* ich füge etwas hinzu:*//
a:active {
background-position: center center
}
soo: 3 Status des Hintergrundbildes
Wenn Sie dynamische Textlinks für viele CMS-Softwarepakete (wie WordPress oder Joomla) entwerfen, können Sie dies verwenden, wenn sich das Hintergrundbild des Links beim Hovern ändert, aber Sie würden das "text-indent"-Attribut nicht verwenden.
Was ist mit der Verwendung von
span-Tags und deren Einstellung aufdisplay: none;in CSS, anstatt einen Einzug festzulegen?Das würde funktionieren, Benjamin, würde aber glaube ich Screenreader beeinträchtigen. Etwas in der Art weiss ich. ;)
Das ist vielleicht eine dumme Frage, aber was ist, wenn man eine horizontale Liste von Navigationsschaltflächen hat? Würde man für jede Schaltfläche ein anderes Bild erstellen? Wenn ja, müsste man jeder Schaltfläche einen Klassennamen geben?
Ich bin mir ziemlich sicher, dass ich nicht weiss, wovon ich rede. :-)
Vielen Dank,
M
vielleicht muss man sicherstellen, dass die Frage klarer ist...
Sie können alle Grafiken für Ihre gesamte Website in einer einzigen Sprite zusammenfassen, wenn Sie alle Pixelberechnungen für die Hintergrundpositionierung durchführen möchten. Sie müssten jeder Schaltfläche trotzdem ihren eigenen Klassennamen geben, da jede Schaltfläche eine andere Position innerhalb des Sprites hätte.
Ich habe denselben Trick auf meiner Kundenwebsite für Icon-Links unter http://www.toolshandles.com verwendet.
Ich brauche mehr Erklärungen? :(
????
Ich bin mir nicht sicher, ob ich es richtig erklären kann, da Englisch nicht meine Muttersprache ist, aber ich werde versuchen, klar zu sein
1- In einem Bildbearbeitungsprogramm (Photoshop) ordnen Sie die Bilder, Icons usw. an. Es ist besser, so zu berechnen, dass der Abstand zwischen den Bildern gleich ist. Icons sollten die gleichen Abmessungen haben.
2- Sie laden das Bild in einen Anker -> definieren es als Block und definieren die Größe (Breite/Höhe) des Bildes (Icons) -> Hier können Sie auch die Hintergrundposition (für den Zustand "Maus aus") hinzufügen.
3- Beim Überfahren mit der Maus definieren Sie eine neue Hintergrundposition, sodass das Bild den Zustand wechselt. In unserem Beispiel haben wir beim Hovern die Position (Koordinate) des Bildes in sprite.png definiert.
Warum benutzen wir das?
- So laden wir ein Bild (das unsere Icons mit allen Zuständen enthält) nur einmal pro Seite und verwenden es mehrmals. Das Bild wird gecached und wiederverwendet.
- Wir müssen nicht viele Bilder mit 2-3 Zuständen speichern und verwenden.
Ich hoffe, ich war klar genug.
Prost.
Das ist eine wirklich schöne Erklärung, Bruder...
Danke vielmals
Ich habe versucht, Sprites eine Weile herauszufinden. Es wäre hilfreich, zu sehen, was der Tipp bewirkt.
Ich bin verwirrt, bei all diesen Beispielen sehe ich nur jeweils ein Bild.
Ich dachte, ein Sprite hätte immer zwei Bilder? Wie wäre der vollständige Code für ein Sprite mit beiden Bildern (Hover und statisch – oder Hover, statisch und verwendeter Link)?
Vielen Dank im Voraus
Ian
Sie sehen hier nicht das große Ganze, die Idee bei CSS-Sprites ist, dass Sie eine Bilddatei verwenden, die 2 Bilder nebeneinander oder übereinander enthält, egal wie Sie es wollen, Sie verwenden CSS, um dem Container einen Hintergrund hinzuzufügen, und verwenden dann das Pseudoelement "hover", um diese Grafik neu zu positionieren, um die Illusion von zwei Grafiken in diesem Container zu erzeugen.
Wie kann das inline funktionieren? Ich habe eine Textzeile, der eine Schaltfläche folgen muss, die beim Anklicken eine PDF-Datei herunterlädt.
Vielleicht ist es einfacher, zwei Bilder anstelle eines Sprites zu verwenden?
Wenn der sichtbare Teil Ihres Sprites eine Dimension hat, die beispielsweise in eine Seitenleiste passt, würde dann das gesamte Sprite funktionieren, wenn es tatsächlich breiter ist als das angezeigte Bild?
Danke, das hat wirklich gut funktioniert, sobald ich die background-position-Werte verstanden habe.
Hallo, funktioniert das auf responsiven Websites?
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
wegen der festen Breite und Höhe, ist es möglich, es responsiv zu machen?
Vielen Dank,
chadtulio
Es muss doch eine Möglichkeit geben, "%" statt "px" zu verwenden, damit es funktioniert. Solange Ihr Hintergrundbild gut skaliert.
Es wäre besser, wenn ich sofort ein Beispiel sehen könnte!
Sprite-Bilder können beliebig groß sein... Wenn das Bild also 50x50 Pixel groß ist, kann Ihre Bildleinwand 1000x1000 Pixel groß sein, wenn Sie möchten... Wenn Sie also viel weißen Platz um den Bildbereich herum haben möchten, ist das in Ordnung... Ich trenne oft jedes Bild durch 100-Pixel-Blöcke, rein für mathematische Zwecke und um jede unvorhergesehene Chance zu vermeiden, dass die anderen Bilder auf dieser PNG-Datei sichtbar werden...
Zum Beispiel, wenn ich ein Menü habe und jeder Punkt 250 Pixel breit x 40 Pixel hoch ist, dann stelle ich sicher, dass jedes Bild im Sprite nicht näher als 300 Pixel voneinander entfernt ist, wenn sie nebeneinander liegen...
Sie alle können sofort ein Beispiel für ein Sprite sehen. Es heißt "Google". Wollte es nur sagen.
Es funktioniert wie eine Maske, zeigt das Bild nur entsprechend Ihrer Tag-Breite und -Höhe an. Wenn Sie eine Bilddatei mit einer Höhe von 100px und einer Breite von 100px und Ihre Social-Icon-Größe von 30px x 30px haben, können Sie den Code wie folgt schreiben:
a{
dispaly:block;
background:url(images/sprite_file.jpg) left top no-repeat;
height:30px; /*gemäß der Icon-Höhe/
width:30px; /*gemäß der Icon-Breite/
text-indent:-9999999px;
}
a:hover{
background:url(images/sprite_file.jpg) left bottom no-repeat;
}
im Hover-Zustand sehen Sie den unteren Teil Ihrer Datei in einem 30x30 Pixel großen Maskierungsbereich. Stellen Sie also sicher, dass am unteren Rand von sprite.jpg Ihr Hover-Bild steht.
Funktioniert das nur beim Hovern oder kann ich es für besuchte Links einstellen?
Deborah gute Frage, 90% ich bin sicher, dass es nur beim Hovern funktioniert und für 10% werde ich es versuchen.
CSS-Sprites gibt es schon sehr lange. Lesen Sie einen viel interessanteren und lehrreicheren Artikel dazu auf alistpart.com
http://alistapart.com/article/sprites
// Ich habe keine Verbindung zu AListApart; Es ist nur eine Komponente von CSS, die mich am meisten begeistert – ich habe schon in den frühen 00er Jahren Code geschrieben und Grafiken für diese Art von Menüs erstellt.
Wenn jemand Bilder in CSS konvertieren muss, kann ihm dieser Link helfen.
Base64 CSS Generator
Online base64 css, dataURI Generator. Konvertieren Sie Ihre Bilder einfach in base64 CSS, Data URI, XML.
http://www.base64css.com/
Es ist mehr als 20 Jahre her, seit ich Code geschrieben habe, also behalten Sie das im Hinterkopf, während Sie hysterisch lachen.
Ich wollte einen langen Text in 3 oder 4 Teile aufteilen und den Benutzer ihn bewegen lassen, wenn er fertig mit dem Lesen ist. Ich fragte mich, ob ich das Bild-Sprite dafür verwenden könnte. Und wenn ja, müsste ich den Text aufteilen und jedes Stück als Bild speichern?
Ich weiß, dass dies ein alter Beitrag ist, aber genau das habe ich gebraucht.
Wie mache ich das Bild responsiv? Ich habe alles versucht, aber ich bekomme nur ein winziges Stück des Bildes.
Es muss sich sowohl in der Höhe als auch in der Breite verkleinern.
Ich habe width: 100%, max-width: 625px und height: auto versucht, aber ich bekomme nichts.
Versuchen Sie, "height:auto;" zu #divname img hinzuzufügen.
Vielen Dank!
Wo ist die Demo?
Habe eine für Sie eingefügt. :)