CSS - Sprites come immagini di sfondo

Possiedo un'applicazione Web di cui sto lavorando per migliorare le prestazioni. Nel tentativo di farlo, ho deciso di usare gli sprite css. Ho inserito tutte le mie immagini in un file .png chiamato images.png.CSS - Sprites come immagini di sfondo

Gli sprite CSS hanno funzionato bene per tutte le classi CSS che mostrano solo un'immagine una volta. Tuttavia, molte delle mie immagini devono essere ripetute. Ad esempio, ho un'immagine banner.png usata per lo sfondo del banner. Ogni volta che imposto la proprietà background-repeat, sembra che l'immagine non si ripeta. Per mostrare le mie definizioni CSS, eccoli:

Before CSS Sprites 
------------------ 
.ghwc { 
    background-image: url(/images/layout/banner.png); 
    background-repeat:repeat-x; 
    color:White; 
    width:300px; 
} 

After CSS Sprites 
----------------- 
.ghwc { 
    background-image: url(/images/images.png); 
    background-repeat:repeat-x; 
    color:White; 
    background-position:60px 319px; 
    width:300px; 
}

La mia domanda è, come si usa sprite CSS per le immagini ripetute come sfondi?

Grazie,

fonte

2010-05-18 user208662

La mia domanda è, come si usa sprite CSS per le immagini ripetute come sfondi?

Non è così. Questo semplicemente non è possibile usando gli sprite CSS. Per fare ciò, dovresti essere in grado di specificare un'area dell'immagine che deve essere ripetuta e, a mia conoscenza, impossibile in entrambi i CSS 2 e 3.

fonte

2010-05-18 20:23:39

Probabilmente è possibile scattare immagini che si ripetono solo in una direzione , ma in realtà non sembra valga la pena. Abbiamo bisogno del supporto per le immagini impacchettate ... –

@Matti yup, o le risposte multipart per quella materia. –

potresti creare un gruppo di div con lo sfondo sprecato come bg, impostare la larghezza e l'altezza e poi avere un div in posizione assoluta in cima: D ma se lo fai, sono abbastanza sicuro che da qualche parte un unicorno è ucciso – Jason

Assumendo l'immagine di sfondo (images.png) mostra affatto, il tuo codice dovrebbe funzionare. Se vuoi renderlo correttamente su Opera e Firefox, devi aggiungere

background-attachment: fixed;

Modifica: ho appena realizzato che probabilmente stai parlando di un set di coordinate specifico in un'immagine "sprite" composta da diverse "immagini". Non hai intenzione di ottenere una particolare area di un'immagine da ripetere in questo modo. Ritaglia l'immagine alla dimensione che ti interessa, quindi utilizza il codice che hai.

fonte

2010-05-18 20:29:06

Non penso che sia la sua domanda, è che ora vuole usare la struttura come immagine di sfondo - il che è impossibile per quanto posso vedere. –

Sì, modificato per riflettere questo. Non si rendeva conto di che cosa stava parlando in un primo momento. –

È possibile eseguire questa operazione se si è solo background-repeat:repeat-x; come nell'esempio, è sufficiente rendere tutti gli sfondi contenuti all'interno del contenitore dell'immagine dello sprite della stessa larghezza e disporre verticalmente il file dell'immagine dello sprite. Quindi la proprietà della posizione dello sfondo avrà sempre la prima posizione x uguale a 0 e lo sprite si trova con la seconda posizione y (ad esempio background-position:0 0; background-position:0 -100px; background-position:0 -200px; ecc.). Questo potrebbe non funzionare su tutti i browser se non è possibile specificare l'altezza esatta e impostare overflow:hidden.

fonte

2010-05-18 20:34:31 mVChr

Se si desidera utilizzare repeat-x, non è necessario mettere più immagini una accanto all'altra nello sprite, poiché l'intero sprite è duplicato in direzione x (come già notato). Ma puoi metterli in una linea verticale. (Al contrario, se si desidera utilizzare repeat-y, non esiste nulla come "background-crop" fino ad ora (forse in CSS4?;))

fonte

2013-01-22 14:32:24

CSS - Sprites come immagini di sfondo

risposta

Problemi correlati