Ottieni icona da una singola immagine

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

enter image description here

fonte

2013-08-12 David Dury

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. –

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; 
}

Demo

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.

fonte

2013-08-12 06:31:51

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 e width 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

fonte

2013-08-12 06:32:19 Quentin

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; 
}

http://jsfiddle.net/T2EtY/1/

fonte

2013-08-12 07:01:36

Ottieni icona da una singola immagine

risposta

Problemi correlati