Ist es möglich, CSS-Sprites für "Vordergrund" -Bilder zu verwenden - d. H. Bilder, auf die Benutzer klicken und mit denen sie interagieren und möglicherweise sogar drucken sollen?CSS Sprites - nicht nur für Hintergrundbilder?
Anstelle der CSS background-image Eigenschaft. Was würdest du benutzen?
Sie können einen Standard <img /> Tag verwenden und ihn in einen Container (wie einen <div />) mit einer begrenzten Höhe/Breite legen. Verwenden Sie dann relative Positionierung oder negative Ränder, um die Position des Bildes zu steuern.
Sie können dies tun, aber Sie müssen Hintergrundbilder für Sprites verwenden, da Sie Position einstellen können. Dies kann für Links oder was auch immer Sie wollen verwendet werden. Schauen Sie sich Googles Sprite, verwenden sie es für sich die Tasten auf iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
-1 Sie können die Position eines Elements steuern 'position' in CSS in Kombination mit mit' oben, links, rechts, bottom'. Alternativ können Sie negative Ränder verwenden. –
Ich habe nie gesagt, du könntest die Position in keinem Element kontrollieren. Sie können es jedoch mit Hintergrundbildern für jedes Element arbeiten lassen. –
Nun natürlich können Sie, aber sie fragen sich, wie es geht * ohne * Hintergrundbilder! –
Sie können dies wie folgt mit weniger CSS tun:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Was auch immer die Klasse hat class="myClass" wird nur das Bild drin, nichts sonst. Dies kann eine <a> eine <input> oder eine normale <div>, was auch immer Sie wollen.
Es ist ein Hintergrundbild ... aber es ist das Element, das Sie betrachten, nichts ist vor diesem Hintergrund. Nur weil Sie background-image für die Eigenschaft verwenden, bedeutet das nicht, dass es kein Vordergrundelement ist ... wie eine Schaltfläche, auf die Sie klicken können. Sie können das tun wie folgt aus:
<input type="button" class="myClass" />
Das ist eine auf Hintergrundbildern basierende Lösung, egal wie man das dreht. Die Frage fragt explizit nach etwas anderem. Und ich verstehe, warum - offensichtlich gibt es einen grundlegenden Unterschied zwischen Bildern, die Teil des Dokumenteninhalts sind, und denen, die Teil seines Layouts und Stils sind. – amn
Eine primäre Anforderung, die nicht durch Hintergrundbilder für ARIA ist gehandhabt werden kann. Alle ARIA-Anforderungen lehnen die Verwendung von Hintergrundbildern für aussagekräftige, navigatorische und andere "informative" Anwendungen ab, die ein Bildschirmleseprogramm im Namen eines Benutzers mit einer Behinderung interpretieren muss. Die Möglichkeit, eine Hintergrundbild-CSS-Anweisung für ein IMG-Tag und ein ARIA-Tagging bei Bedarf auszutauschen, ist ein entscheidendes Merkmal in der derzeit regulierten Entwicklungsumgebung.
Die Antwort auf die ursprüngliche Frage ist ja! Es ist möglich, das Bild zu verwenden, das in einer css-Hintergrundanweisung angezeigt wird. Aber Sie müssen das Sprite-Bild in einem Bildeditor öffnen und den Teil auswählen, der das gewünschte Sprite darstellt, und es als separates Bild speichern und in einem img-Tag referenzieren.
Die Herausforderung besteht darin, dass diese Situationen häufig in einer vordefinierten Kontrollbibliothek auftreten. Das Finden und Ändern des Codes in der Bibliothek, die das Hintergrundbild auswählt und anzeigt, ist ein wenig schwierig, das Ändern des Codes ist schwierig!
Genie, danke !! – Summer
Dies ist Overkill IMO, Sie können nur die Eingabe auf Display-Block und entfernen Sie die div/Wrapper aus der Gleichung zusammen, es ist ein viel einfacher Ansatz. –
@Nick Das macht keinen Sinn. Wie würdest du ein Sprite anwenden, ohne den Container zu benutzen? –