Lật theo chiều dọc ảnh nền mỗi lần lặp lại y

Question

Tôi đang tìm kiếm một mẹo lặp lại hình nền của mình theo chiều dọc, nhưng mỗi khi ảnh được lặp lại, tôi muốn lật ảnh theo chiều dọc.

Tôi đã thử tất cả những điều trong tâm trí của tôi với lặp lại-y nhưng tôi không tìm thấy một giải pháp, thậm chí tìm kiếm nó trong google.

Ví dụ:

Straight background-image

Lộn background-image khi nó lặp lại-y

Và sau đó lật lại để thẳng

Có một phương pháp để có được vị trí đó?

Tôi sẽ chấp nhận giải pháp trong JScript (và thư viện của nó) chỉ khi không có giải pháp với css thuần túy.

Cảm ơn tất cả!

Answer 1

này không thể được thực hiện bằng CSS3 tiêu chuẩn vì không có thuộc tính CSS3 để xoay một hình ảnh nền.

tham khảo: http://www.w3.org/TR/css3-background

Theo đề nghị, kết hợp hai mô-típ trong một hình ảnh duy nhất, đơn giản hơn nhiều và sẽ luôn luôn làm việc.

Answer 2

Một giải pháp hoàn toàn css không thể thực hiện được.

Tùy thuộc vào hình ảnh của bạn.

Nếu đó là một tĩnh mà bạn sử dụng để trang trí trang, Tốt nhất là chỉ sửa đổi nó bằng cách làm cho nó hai lần cao hơn và thêm một bản sao lật sang phần dưới cùng và sử dụng trực tiếp thông qua css chuẩn ..

Nếu nó là một động, bạn vẫn có thể tạo ra hình ảnh mới (original + lộn) như data url qua js và sử dụng nó trên phần tử của bạn.

Nếu không, các giải pháp sẽ được sao chép divs, mà luôn luôn là bất tiện ...

Answer 3

Theo nhận xét của tôi, đó là giải pháp CSS thuần túy.

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

Ví dụ (chạy với tư cách trang đầy đủ nếu nó không hoạt động đây hoặc nhìn vào Fiddle này)

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

Nếu bạn dựa vào sử dụng một hình ảnh duy nhất và trở lại nó, bạn có thể làm một số Ảo thuật JavaScript. Chèn yếu tố với định vị tuyệt đối và thấp z-index mỗi JavaScript có thể một với lớp "đảo ngược" trong đó có một số chuyển đổi css để trở lại nó. Việc định vị cũng nên được thực hiện trong JS - ví dụ: img1 phải có đầu: 0, img2 top: heightOfImages * 1, img3 top: heightOfImages * 2 v.v. Thực hiện việc này cho đến khi bạn đạt đến chiều cao của Phần tử gốc hoặc Độ phân giải của người dùng.

không thực sự xinh đẹp nhưng doable

Answer 4

tôi sẽ tải hình ảnh nền như vậy

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

Khi hình ảnh đã nạp chúng ta có thể làm một chút JavaScript mà không trình duyệt làm nhiều công việc phụ. chúng tôi có thể kiểm tra xem chiều cao của hình ảnh có lấp đầy toàn bộ cửa sổ hay không.

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

Nếu nền ảnh không lấp đầy chiều cao đầy đủ của cửa sổ thì nền này cần lặp lại/lật ngay (điều này sẽ tăng thời gian tải); nếu không, trình xử lý sự kiện có thể được sử dụng để kích hoạt kiểm tra sau này.
Hàm sau vẽ hình ảnh vào phần tử canvas và tạo một dataURL. Src nền-hình ảnh được cập nhật lên dataURL mới và nền lặp được thay đổi từ không lặp lại thành lặp lại-y (theo chiều dọc);
trình xử lý sự kiện sẽ bị xóa để chức năng không được gọi lại.

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

Và hey mau

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

Answer 5

Tôi tạo ra một giải pháp phần/hack mà làm việc trong một số trường hợp. Có thể ai đó khác sẽ thấy nó hữu ích. Nội dung của bạn không thể đẩy quá xa xuống trang và nó chỉ hoạt động với hình nền rất lớn.

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

Về cơ bản tôi đang sử dụng nhiều hình nền lặp lại theo chiều ngang, và bù đắp theo chiều dọc. Sau đó, tôi phản ánh container. Hạn chế là các nguồn gốc không lặp lại mãi mãi. Vì vậy, nếu bạn không mong đợi nội dung của bạn để đẩy xuống dưới trang, đây là một lựa chọn.