CSS tecnologia di immagine del mosaico

immagine Split

Appiattire l'immagine è una raccolta di singole immagini.

Ci sono molte immagini sulla pagina può richiedere molto tempo per caricare e genera più richieste al server.

Utilizzare una spaccatura server di immagini ridurrà il numero di richieste e di risparmiare larghezza di banda.

immagine Split - semplice esempio

Invece di usare tre immagini separate, come si usa questa immagine singola ( "img_navsprites.gif"):

Con i CSS, possiamo mostrare solo una parte dell'immagine che ci serve.

Nell'esempio che segue mostra una parte del CSS specificato "img_navsprites.gif" immagine:

Esempi di analisi:

• <Img class = "casa" src = "img_trans.gif" /> - perché non possono essere vuoti, attributo src definisce solo una piccola immagine trasparente. L'immagine visualizzata sarà specifichiamo in CSS immagini di sfondo
• Larghezza: 46px; height: 44px; - definito parte dell'immagine che usiamo
• fondo: url (img_navsprites.gif) 0 0; - immagine di sfondo personalizzata e la sua posizione (0px sinistra, in alto 0px)

Questo viene fatto usando un'immagine diviso il modo più semplice, e adesso usiamo link e librarsi effetti.

Appiattire l'immagine - per creare un elenco di navigazione

Vogliamo usare l'immagine di divisione ( "img_navsprites.gif"), per creare una lista di navigazione.

Useremo una lista HTML, perché può essere collegato, e supporta anche un'immagine di sfondo:

Esempi di analisi:

• #navlist {position: relative;} - posizione viene impostata posizionamento relativo, consentono il posizionamento assoluto all'interno
• #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin e padding è impostato su 0, lo stile di elenco viene eliminato, tutti gli elementi della lista sono il posizionamento assoluto
• #navlist Li, #navlist una {height: 44px; display: block;} - l'altezza di tutte le immagini è 44px

Ora ogni posizionamento parte specifica e stile:

• #Home {left: 0px; width: 46px;} - posizionato a sinistra, e il modo in cui la larghezza dell'immagine è 46px
• #Home {background: url (img_navsprites.gif) 0 0;} - immagine di sfondo personalizzata e la sua posizione (0px sinistra, in alto 0px)
• #prev {left: 63px; width: 43px;} - sulla 63px corretto posizionamento (#Home larghezza 46px + qualche spazio in più tra gli elementi), una larghezza di 43px.
• #prev {background: url ( 'img_navsprites.gif') -47px 0;} - immagine di sfondo personalizzato sul 47px destra (#Home divisori larghezza 46px + 1px)
• #next {left: 129px; width: 43px;} - a 129px posizionamento a destra (#prev 63px + larghezza #prev è 43px + spazio rimanente), la larghezza è di 43px.
• #next {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - immagine di sfondo personalizzato sul 91px destra (#Home 46px + 1px Linea di divisione + Larghezza prev 43px + 1px divisori)

Appiattire l'immagine s - hover effetto

Ora, vogliamo che il nostro elenco di navigazione per aggiungere un effetto hover.

	: Il selettore effetto hover per il mouse sopra l'elemento di visualizzazione selettore Tip :: presso può essere applicato a tutti gli elementi.

La nostra nuova immagine ( "img_navsprites_hover.gif") contiene tre immagini di navigazione e tre immagini:

Poiché si tratta di una singola immagine, invece di sei file di immagine separato quando un utente rimane l'immagine non ritardare il caricamento.

Aggiungiamo effetti al passaggio del mouse aggiungere solo tre righe di codice:

Esempi di analisi:

• Dal momento che la voce di elenco contiene un link, possiamo usare il: hover pseudo-classe
• #Home a: hover {background: url trasparente (img_navsprites_hover.gif) 0 -45px;} - Per tutte e tre le immagini al passaggio del mouse si precisa la stessa posizione di fondo, ma poi giù 45px ciascuna