Odwróć pionowo a background-image za każdym razem powtarzać-y

Question

Szukam trick że powtórzyć moje obraz tła w pionie, ale za każdym razem, gdy obraz jest powtarzany Chcę odwrócić go w pionie.

Próbowałem wszystkie rzeczy w moim umyśle z repeat-y, ale nie znalazł rozwiązanie, nawet szukając w Google.

przykład:

prosty tła obrazu

Odbity tła obrazu, gdy powtórzyć Y

i ponownie odwrócona do prostej

Jest sposób otrzymywania ta pozycja?

będę zaakceptować rozwiązanie w JScript (i bibliotekę niego) tylko wtedy, gdy nie jest to rozwiązanie z czystym CSS.

Dziękuję wszystkim!

Answer 1

ta nie może być wykonana przy użyciu standardowych CSS3, ponieważ nie ma właściwości CSS3, aby obrócić obraz tła.

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

Jak sugeruje, połączyć dwa motywy w jednym obrazie, znacznie prostszy i zawsze będzie działać.

Answer 2

Rozwiązanie czysto css nie jest możliwe imo.

To zależy od Twojego zdjęcia.

Jeśli jest to statyczna, na których używasz do dekoracji strony, to najlepiej po prostu go zmodyfikować poprzez uczynienie go dwa razy wyższy i dodanie obróconą kopii do dolnej części i stosując bezpośrednio poprzez standardową css ..

Jeśli jest dynamiczny, nadal można wygenerować nowy obraz (oryginalny + odwrócone) jako data url przez js i użyć go na swoim elemencie.

przeciwnym razie rozwiązaniem byłoby powielacze DIV, który jest zawsze niewygodna ...

Answer 3

Zgodnie z moim komentarzem jest czyste rozwiązanie CSS.

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

Przykład (uruchom jako pełnej strony, jeśli to nie działa tutaj lub spojrzeć na ten Fiddle)

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

jeśli opierają się na wykorzystaniu pojedynczego obrazu i przywrócić go, można zrobić kilka Magia JavaScript. Włóż elementy z pozycjonowania absolutnego i dolnej osi z indeksem za JavaScript może jednej klasie „odwrócone” zawierający transformację css to powracają. Pozycjonowanie powinno być również wykonane w JS - na przykład img1 powinien mieć top: 0, img2 top: heightOfImages * 1, img3 top: heightOfImages * 2 i tak dalej. Wykonaj tę czynność , aż osiągniesz wysokość elementu nadrzędnego lub rozdzielczości użytkownika.

nie bardzo ładne, ale wykonalne

Answer 4

Chciałbym załadować obraz tła jak tak

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

Jako że obraz został już załadowany możemy zrobić trochę JavaScript bez przeglądarce robi dużo dodatkowa praca. możemy sprawdzić, czy wysokość obrazu wypełnia całe okno.

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

Jeśli tło obraz nie wypełnia całą wysokość okna wówczas tło wymaga powtarzania/przerzucanie razu (pozwoli to na zwiększenie czasu ładowania); W przeciwnym razie można uruchomić detektory zdarzeń później.
Następująca funkcja rysuje obraz do elementu canvas i tworzy adres danychURL. Src obrazu tła jest aktualizowany do nowego pliku danychURL, a tło powtarzania zmienia się z nie powtarzanego na powtarzające się (pionowo);
detektory zdarzeń są następnie usuwane, więc funkcja nie jest ponownie wywoływana.

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

I hej presto

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

Answer 5

stworzyłem częściowe rozwiązanie/hack, który działa w niektórych przypadkach. Może ktoś inny uzna to za przydatne. Twoje treści nie mogą przesuwać się zbyt daleko w dół strony i działa tylko z bardzo dużymi obrazami tła.

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

Zasadniczo m za pomocą wielu środowisk powtarzające się poziomo, a przesunięcie w pionie. Potem odbiłem pojemnik. Ograniczeniem jest to, że tła nie powtarzają się na zawsze. Więc jeśli nie oczekujesz, że zawartość przesunie się w dół strony, jest to opcja.