È possibile utilizzare gli sprite CSS per le immagini "in primo piano", ovvero le immagini con cui gli utenti devono fare clic, interagire e magari anche stampare?CSS Sprites - non solo per le immagini di sfondo?
Invece di utilizzare la proprietà CSS background-image. Cosa useresti?
È possibile utilizzare un tag standard <img /> e inserirlo in un contenitore (ad esempio <div />) con un'altezza/larghezza limitata. Quindi utilizzare il posizionamento relativo oi margini negativi per controllare la posizione dell'immagine.
È possibile eseguire questa operazione, ma è necessario utilizzare le immagini di sfondo per gli sprite in quanto è necessario essere in grado di impostare la posizione. Questo può essere usato per collegamenti o qualsiasi cosa tu voglia. Guardate Googles sprite, lo usano per là pulsanti su iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
-1 Puoi controllare la posizione di qualsiasi elemento usando 'position' in CSS in combinazione con' top, left, right, bottom'. In alternativa, puoi usare margini negativi. –
Non ho mai detto che potessi; t controlla la posizione in qualsiasi elemento. Tuttavia, puoi farlo funzionare con immagini di sfondo su qualsiasi elemento. –
Beh, certo che puoi, ma ti stanno chiedendo specificatamente come farlo * senza * immagini di sfondo! –
Si può fare questo con meno CSS in questo modo:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Qualunque sia ha la classe class="myClass" avrà solo l'immagine in essa, nulla altro. Questo può essere un <a> un <input> o un normale <div>, qualunque cosa tu voglia.
È un'immagine di sfondo ... ma è l'elemento che stai guardando, niente è di fronte a quello sfondo. Solo perché stai utilizzando background-image per la proprietà non significa che non sia un elemento in primo piano ... come un pulsante su cui puoi fare clic. Puoi farlo in questo modo:
<input type="button" class="myClass" />
Questa è la soluzione basata su immagini di sfondo, indipendentemente da come la giri. La domanda chiede esplicitamente qualcos'altro. E in qualche modo capisco perché - c'è ovviamente * fondamentale * differenza tra le immagini che fanno parte del contenuto del documento e quelle che fanno parte del suo layout e stile. – amn
Un requisito principale che non può essere gestito dalle immagini di sfondo è per ARIA. Tutti i requisiti ARIA rifiuteranno l'uso delle immagini di sfondo per usi significativi, di navigazione e altri "informativi" che uno screen reader deve interpretare per conto di un utente con disabilità. Essere in grado di scambiare una dichiarazione di cx di un'immagine di sfondo per un tag img e qualche tag ARIA quando necessario è una caratteristica critica nell'attuale ambiente di sviluppo regolamentato.
La risposta alla domanda originale è sì! È possibile utilizzare l'immagine che viene visualizzata in un'istruzione di sfondo css. Ma devi aprire l'immagine sprite in un editor di immagini e selezionare la porzione che rappresenta lo sprite che desideri e salvarla come immagine separata e farne riferimento in un tag img.
La sfida è che spesso queste situazioni sorgono in una libreria di controllo predefinita. Trovare e modificare il codice nella libreria che seleziona e visualizza l'immagine di sfondo è un po 'difficile, cambiare il codice è difficile!
Genius, grazie !! – Summer
Questo è IMO overkill, puoi semplicemente impostare l'ingresso sul blocco di visualizzazione e rimuovere il div/wrapper dall'equazione all-together, è un approccio molto più semplice. –
@Nick Questo non ha alcun senso. Come applicheresti uno sprite senza usare il contenitore? –