Ho visto così tante volte fino ad ora, ma non ho mai usato me stesso. Qualcuno può spiegare come è possibile ottenere specifiche immagine icona da questa singola immagine png, ad esempio le icone che ho selezionato con il rosso ... usando cssOttieni icona da una singola immagine
risposta
che si chiama CSS sprites. È usato per ridurre le richieste http. In pratica tutte le icone sono posti su un'unica tela e sono utilizzati come background-image
proprietà e successivamente vengono mappati usando i CSS background-position
proprietà, in modo ad esempio
.icon1 {
background-image: url('YOUR_URL_HERE');
background-position: 10px 10px; /* X and Y */
height: 30px;
width: 30px;
}
Così InShort basta definire una correzione altezza/larghezza il tuo elemento e mappa la tela usando la proprietà background-position
. Quindi, se hai 100 icone di piccole dimensioni su una pagina, farà 100 richieste al server, quindi per aumentare le prestazioni, vengono usati gli Sprites CSS.
Una domanda: come si ottiene la posizione di sfondo? Voglio dire, ci provi finché non ottieni la foto giusta? C'è una tecnica o uno strumento che lo fa? –
@DavidDury O manualmente o otterrai tonnellate di [generatori di sprite] (https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla: it-IT: ufficiale & client = firefox-a) –
- Impostare un fisso (in pixel)
height
ewidth
su un elemento - Impostare l'immagine come la
background-image
- Regolare
background-position
così la parte dell'immagine che si desidera essere visibile è in vista
Utilizzo di abbreviazioni di sfondo per il posizionamento dell'immagine.
div {
background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px;
width:27px;
height:27px;
}
- 1. Ottieni una singola immagine specifica dalla libreria multimediale di Wordpress
- 2. CSS: visualizzazione di una particolare icona da un file immagine
- 3. Ottieni icona da un'altra applicazione Android
- 4. UISegmentedControl icona stato selezionato immagine
- 5. Imposta immagine icona in Java
- 6. Ridimensiona icona icona indicatore di Google Maps immagine
- 7. Blocca immagine (o immagine) o Ottieni immagine (o immagine) da excel utilizzando EPPlus
- 8. Imposta immagine icona nel file Jar
- 9. Creazione di un video da una singola immagine per una durata specifica in ffmpeg
- 10. Annullamento di una singola richiesta di immagine nel browser HTML5
- 11. Come combinare più immagini in una singola immagine in Android?
- 12. Immagine Ottieni richieste con AngularJS
- 13. Rimuovi icona da JOptionPane
- 14. Ottieni risultato riga singola con Doctrine NativeQuery
- 15. C# Ottieni immagine utente (Avatar)
- 16. Django - Ottieni oggetti chiave esterna in una singola query?
- 17. Come unire * Immagine singola * con un video
- 18. Ottieni percorsi immagine da NSBundle in Objective C?
- 19. Ottieni un'estensione di immagine da un file caricato in Laravel
- 20. Ottenere una singola colonna da un'entità
- 21. Leggere una singola riga da stdin
- 22. Estrai solo una singola directory da tar
- 23. Messaggio di avviso di compilazione immagine icona non assegnato all'applicazione
- 24. JButton testo e icona immagine sono tagliati con ellissi
- 25. Immagine di lancio di iPad Pro e icona dell'applicazione
- 26. Carica icona app da xcassets
- 27. Ottieni immagine incollata dagli Appunti Firefox
- 28. dataTables jquery - come aggiungere immagine/icona di ordinamento?
- 29. Aggiunta immagine icona alla classe css per elementi html
- 30. Select2 aggiungere icona immagine di opzione in modo dinamico
Si chiama CSS sprite. per capire questo, devi essere consapevole della larghezza e dell'altezza di ogni icona. –
@Mr_Green Ho pensato allo stesso modo quando ci sono icone di dimensioni diverse .. –
aggiungendo alle soluzioni di seguito, anche prendere l'aiuto del progettista che ha creato questa immagine. –