Flip vertikal eine Hintergrund-Bild jedes Mal wiederholen-y

Question

Ich bin für einen Trick, die Suche, dass mein Hintergrundbild vertikal wiederholen, aber jedesmal, wenn das Bild wiederholt wird, ich mag es vertikal kippen.

Ich habe versucht, all die Dinge in meinem Kopf mit repeat-y, aber ich habe keine Lösung gefunden, auch für sie in Google suchen.

Beispiel:

Gerade background-image

Flipped Hintergrund-Bild, wenn es wiederholt-y

und blätterte dann wieder gerade

ein Verfahren zu erhalten ist diese Position?

Ich werde die Lösung in JScript (und Bibliothek davon) nur akzeptieren, wenn es keine Lösung mit reinem CSS ist.

Danke euch allen!

Answer 1

Dies kann nicht, da es keine CSS3-Eigenschaften ein Hintergrundbild zu drehen, sind unter Verwendung von Standard CSS3 erfolgen.

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

Wie bereits angedeutet, kombinieren die beiden Motive in einem einzigen Bild, viel einfacher und wird immer funktionieren.

Answer 2

Eine rein CSS-Lösung ist nicht möglich imo.

Es hängt von Ihrem Bild ab.

Wenn es sich um eine statische ist, auf dem Sie die Seite dekorieren verwenden, ist es am besten, nur sie ändern, indem sie zweimal größer und das Hinzufügen einer blätterte Kopie an den unteren Teil zu machen und direkt über Standard mit CSS ..

Wenn es sich um einen dynamischen handelt, können Sie immer noch ein neues Bild (Original + umgedreht) als data url über js generieren und auf Ihrem Element verwenden.

Andernfalls würde die Lösung dupliziert divs sein, die immer unbequem ist ...

Answer 3

Laut meinem Kommentar ist eine reine CSS-Lösung.

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

Beispiel (in als ganze Seite ausgeführt werden, wenn es hier nicht funktioniert oder schauen Sie auf dieser Fiddle)

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

Wenn Sie verlassen sich auf ein einzelnes Bild mit und wiederherstellen es, könnten Sie einige tun JavaScript-Magie. Insert Elemente mit absolute Positionierung und einem unteren Z-Index pro JavaScript kann eine mit Klasse „umgekehrt“ die einige CSS-Transformation enthält es wiederherzustellen. Die Positionierung sollte auch in JS erfolgen - zum Beispiel img1 oben haben sollte: 0, img2 top: heightOfImages * 1, img3 top: heightOfImages * 2 und so weiter. Tun Sie dies , bis Sie die Höhe Ihres übergeordneten Elements oder die Auflösung des Benutzers erreicht haben.

nicht wirklich schön, aber machbar

Answer 4

Ich würde das Hintergrundbild geladen werden, wie so

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

Wie das Bild bereits geladen können wir ohne den Browser ein wenig JavaScript tun viel zu tun Extra Arbeit. können wir prüfen, ob die Höhe des Bildes das gesamte Fenster ausfüllt.

<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> 

Wenn das Bild Hintergrund nicht die volle Höhe des Fensters füllt dann diesem Hintergrund muss sich wiederholende/Spiegeln sofort (dies wird die Ladezeit erhöhen); anderenfalls können Ereignis-Listener verwendet werden, um die Überprüfung später auszulösen.
Die folgende Funktion zeichnet das Bild auf das Canvas-Element und erstellt eine DatenURL. Das Hintergrundbild src wird auf die neue Daten-URL aktualisiert, und der Wiederholungshintergrund wird von nicht wiederholt zu wiederholt-y (vertikal) geändert;
Die Ereignislistener werden dann entfernt, damit die Funktion nicht erneut aufgerufen wird.

<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> 

Und schwupps

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

Answer 5

habe ich eine Teillösung/Hack, der in einigen Fällen funktioniert. Vielleicht findet jemand anderes es nützlich. Ihr Inhalt kann nicht zu weit nach unten drücken und funktioniert nur mit sehr großen Hintergrundbildern.

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; 
} 

Grundsätzlich verwende ich horizontal mehrere Hintergründe zu wiederholen, und vertikal versetzt ist. Dann habe ich den Behälter reflektiert. Die Einschränkung ist, dass sich die Hintergründe nicht für immer wiederholen. Wenn Sie also nicht erwarten, dass Ihre Inhalte weit nach unten verschoben werden, ist dies eine Option.