CSS: normal und Hover Hintergrundbild in einer einzigen Bilddatei

Question

Guten Tag, ich habe ein DIV von fester Breite und Höhe auf meiner HTML-Seite. Im Normalzustand sollte es Bild A im Hintergrund zeigen und im Hover-Zustand sollte es Bild B zeigen. Ich weiß, wie man es mit CSS und zwei Bilddateien A und B macht. Irgendwo sah ich die beiden Bilder (A und B) hinein eine einzelne Bilddatei und dann haben sie irgendwie CSS geschrieben, so dass das DIV im Normalzustand die obere Hälfte des Bildes auf dem Hintergrund zeigte und im Schwebezustand die untere Hälfte des Bildes zeigte. Könnten Sie bitte CSS-Code beraten, um dies zu erreichen? Das DIV hat keine Position festgelegt, aber es ist ein Kind eines DIV mit relativer Position. Vielen Dank im Voraus.

Vojtech

Answer 1

Dies wird CSS spriting genannt und ist eine wunderbare Technik, die jeder nutzen sollte.

Siehe this answer für einen guten Überblick. Es kommt darauf an, ein DOM-Element mit einer definierten Höhe und Breite zu verwenden und ein Hintergrundbild zu verwenden, das größer als dieser Bereich ist. Dann können Sie selektiv nur Teile dieses Hintergrundbildes anzeigen, indem Sie background-position