2013-03-04 12 views
9

È possibile ripetere un'immagine di sfondo, ma specificare un numero di pixel prima che inizi la ripetizione successiva.puoi creare uno spazio tra le ripetizioni dell'immagine di sfondo?

, ad esempio: url (img.png) [dopo 40 px] repeat-x;

Non voglio aggiungere spazio vuoto all'immagine.

+0

Unico modo sarà con le immagini, che non si desidera aggiungere in modo sasdly. –

+0

No, ho almeno un paio di centinaia di kilobyte di immagini solo per creare un paesaggio virtuale, quindi ho animato le nuvole a Forest, una recinzione, ma un sacco del mio pubblico sarà nella repubblica georgiana, quindi a volte rallenta Internet e non vuole esagerare quando ciò che è importante è il contenuto. Ho dovuto fare un sacrificio e subire le restrizioni. – gcoulby

risposta

2
background-repeat: space; 
background-repeat: round; // round(520/100) = round(5.2) = 5 

Il browser esegue il rendering di cinque immagini nello spazio ma regola la larghezza dell'immagine su 104 px (520 px/5). L'immagine è ingrandita per adattarsi al contenitore. Full details here o leggi Background Size property

+1

Sfortunatamente, lo spazio di ripetizione dello sfondo e i valori arrotondati non sono ancora supportati nei principali browser. Questo è tratto dall'articolo a cui si riferiva: > "Due browser supportano le proprietà di spazio e di arrotondamento. Indovina quali? Hai torto: sono IE9 e Opera. Al momento della scrittura, non sono implementati in Firefox, Chrome o Safari: peggiora: Quando Firefox incontra spazio o round, torna indietro per ripetere Quando Chrome o Safari incontrano spazio o round ricorrono alla non ripetizione. Inoltre, i browser Webkit sembrano riconoscere le proprietà ma non renderli correttamente. " –

Problemi correlati