CSS Sprites Ripetizione immagini

Question

Mi chiedevo se esiste un modo per utilizzare solo un'immagine per le immagini ripetute e non ripetute utilizzando gli sprite css. Quindi in questo caso vorrei combinare tutte le immagini su una pagina indipendentemente dalla larghezza e dall'altezza e se saranno usate come immagini ripetitive o non ripetitive. So che lo standard è creare 1 immagine utilizzando tutte le immagini non ripetitive e un'altra immagine utilizzando tutte le immagini ripetute. Ma volevo solo sapere se potevo usare solo 1 immagine per tutto.

Grazie.

Answer 1

La risposta breve è "no".

La spiegazione è che le immagini che si ripetono sono visualizzate nella loro interezza in qualsiasi direzione vengano ripetute. Pertanto, uno sfondo impostato su repeat-x mostrerà tutto il contenuto dell'immagine in direzione orizzontale. Questo è il motivo per cui non puoi ripetere in entrambe le direzioni simultaneamente usando gli sprite.

Answer 2

so lo standard è di creare 1 immagine utilizzando tutte le immagini non multipli e un'altra immagine utilizzando tutte le immagini ripetute.

Penso che ti sbagli. È impossibile affiancare selettivamente un segmento di un'immagine. Puoi solo affiancare un'immagine nella sua interezza. Pertanto, tutte le immagini che si ripetono devono vivere nei propri file di immagine.

Answer 3

@Ryan Kinal ha ragione quando dice nel suo answer che un'immagine sprite non può essere utilizzata per la ripetizione di immagini di sfondo (in entrambe le direzioni).

C'è ancora un modo per farlo cross-browser con solo uno o due file (non immagini), ma non è così semplice e dovrebbe essere complicato da modificare (anche se gli sprite sono anche complicati da modificare, ma a almeno è visivo!).

• data: base64 encoding per i browser moderni e IE8 +
• MHTML per IE7 e al di sotto (vedi commenti per IE7 su Vista), riscoperti o tradotti da Stoyan Stefanov

Come indicato nell'articolo PHPIED, la linea le immagini vengono ripetute due volte ma con l'aiuto di 3 commenti condizionali puoi puntare IE7 e sotto con il file MHTML, IE8 e sopra con i dati: file base 64 e! IE con lo stesso file di dati.

si finisce con 5 diversi file sul server e 4 scaricati da qualsiasi navigatore:

• un'immagine con no-repeat -Ing sprite
• un'immagine con repeat-x -Ing sprite
• un'immagine con repeat-y sprite -ing
• un file per MHTML (dovrebbe essere servito a IE7 e sotto) background-images
• un file per la stessa ripetizione b immagini ackground ma dati codificati per browser IE8 + e! IE

Le immagini ripetute di grandi dimensioni non devono essere codificate in quanto la dimensione del file potrebbe aumentare notevolmente, il design potrebbe variare.

Answer 4

Purtroppo non è possibile forzare entrambi i tipi di immagini a lavorare sullo stesso sprite. Di solito l'immagine ricorrente è una piccola parte di un'immagine più grande (gradiente) che può essere ripetuta per risparmiare tempo e dimensioni di caricamento. Puoi ripetere le immagini orizzontalmente, verticalmente ed entrambe.
repeat-x, repeat-y o solo repeat per entrambi. Per le immagini non ripetute sullo sprite è necessario indicare le coordinate di scorrimento come scroll 60px -20px (60px è coordinata sinistra e -20px è coordinata superiore).