Capovolgi verticalmente un'immagine di sfondo ogni volta che si ripete-y

Question

Sto cercando un trucco che ripeti verticalmente la mia immagine di sfondo, ma ogni volta che l'immagine viene ripetuta, voglio capovolgerla verticalmente.

Ho provato tutte le cose nella mia mente con repeat-y ma non ho trovato una soluzione, nemmeno cercandola in google.

Esempio:

immagine di sfondo diritta

sfondo-immagine ribaltata quando repeat-y

E poi capovolto nuovamente a diritto

C'è un metodo per ottenere quella posizione?

Accetterò la soluzione in JScript (e libreria di esso) solo se non esiste una soluzione con puro css.

Grazie a tutti!

Answer 1

Questo non può essere fatto utilizzando CSS3 standard di dato che ci sono immobili CSS3 per ruotare un'immagine di sfondo.

Riferimento: http://www.w3.org/TR/css3-background

Come suggerito, combinare i due motivi in ​​una singola immagine, molto più semplice e sarà sempre lavorare.

Answer 2

Una soluzione puramente css non è possibile imo.

Dipende dall'immagine.

Se si tratta di una statica su cui si utilizza per decorare pagina, è meglio modificare solo essa, rendendo due volte più alto e l'aggiunta di una copia capovolto per la parte inferiore e l'utilizzo che direttamente tramite CSS standard ..

Se è dinamico, puoi comunque generare una nuova immagine (originale + capovolta) come data url tramite js e usarla sul tuo elemento.

In caso contrario, la soluzione sarebbe div duplicazione, che è sempre scomodo ...

Answer 3

Secondo il mio commento ecco una soluzione CSS pura.

yourElementWithBackground{ 
    background-image : url("http:yourBackgroundURL"); 
    background-repeat: repeat-y; 
    } 

Esempio (gestito come pagina intera, se non funziona qui o guardare a questo Fiddle)

body { 
 
    height: 1000px; 
 
    width: 300px; 
 
    background-image : url("http://picload.org/image/odgwcig/unbenannt.png"); 
 
    background-repeat: repeat-y; 
 
}

Se si basano sull'utilizzo di una singola immagine e tornare, si potrebbe fare un po ' Magia JavaScript. Inserire elementi con posizionamento assoluto e inferiore z-index per JavaScript può uno con classe "invertito" che contiene alcune trasformazione css ripristinare esso. Il posizionamento deve essere eseguito anche in JS - ad esempio, img1 dovrebbe avere in alto: 0, img2 in alto: heightOfImages * 1, img3 in alto: heightOfImages * 2 e così via. Esegui questo fino a raggiungere l'altezza dell'elemento principale o la risoluzione dell'utente.

non proprio carina ma fattibile

Answer 4

vorrei caricare l'immagine di sfondo in questo modo

<style> 
body{ 
    background-image:url('mybackground'); 
    background-repeat:no-repeat; 
} 
</style> 

Come l'immagine ha già caricato possiamo fare un po 'di JavaScript, senza il browser fare molto lavoro extra. possiamo controllare se l'altezza dell'immagine riempie l'intera finestra.

<script> 
var el  = $('body')[0]; 
var src  = $(el).css('background-image').slice(4, -1); 
var img  = new Image(); 

checkHeight = function(){  
    if(img.height < window.innerHeight){ 
     repeatBg();  
    } 
} 
img.onload = checkHeight(); 
img.src = src; 
</script> 

Se lo sfondo dell'immagine non riempie l'intera altezza della finestra allora questo sfondo ha bisogno di ripetere/lanciando immediatamente (questo aumenterà il tempo di caricamento); in caso contrario è possibile utilizzare gli ascoltatori di eventi per attivare il controllo in un secondo momento.
La seguente funzione disegna l'immagine sull'elemento canvas e crea un dataURL. L'immagine di sfondo src viene aggiornata al nuovo dataURL e lo sfondo di ripetizione viene modificato da non ripetizione a ripetizione-y (verticale);
i listener di eventi vengono rimossi quindi la funzione non viene richiamata.

<canvas style="display:none" id="canvas"></canvas> 


<script> 

repeatBg = function(){ 
    var canvas = $('#canvas')[0]; 
    var ctx = canvas.getContext("2d"); 
    canvas.width = img.width; 
    canvas.height = img.height *2 ; 
    ctx.drawImage(img,0,0); 
    ctx.scale(1, -1); 
    ctx.translate(0, -img.height); 
    ctx.drawImage(img, 0, -img.height, img.width, img.height); 
    var dataURL = canvas.toDataURL(); 
    $(el).css({ 
     'background-image' : 'url('+dataURL+')', 
     'background-repeat' : 'repeat-y' 
    });  
    $(window).off('load, scroll, resize', checkHeight);   
} 
$(window).on('load, scroll, resize', checkHeight); 



</script> 

E oplà

http://jsfiddle.net/dtjones1988/y49rvu73/6/

Answer 5

Ho creato una parziale soluzione/hack che funziona in alcuni casi. Forse qualcun altro lo troverà utile. Il tuo contenuto non può spingersi troppo in basso nella pagina e funziona solo con immagini di sfondo molto grandi.

http://jsfiddle.net/skibulk/6hxeg9cu/

.wrap1 { 
    transform: scaleY(-1); 
    background: url(http://i.stack.imgur.com/I4hlZ.png) left bottom; 
} 

.wrap2 { 
    transform: scaleY(-1); 
    background: 
     url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left top, 
     url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left 500px; 
} 

Fondamentalmente sto usando sfondi multipli ripetono orizzontalmente, verticalmente e offset. Poi ho riflesso il contenitore. La limitazione è che gli sfondi non si ripetono per sempre. Quindi, se non ti aspetti che il tuo contenuto spinga in fondo alla pagina, questa è un'opzione.