lặp lại hình nền css một tập hợp số lần

Question

có cách nào để đặt số lần hình nền lặp lại bằng css không?

Answer 1

không.

bạn có thể đặt chiều rộng tuyệt đối cho hộp nhưng không có tùy chọn css để lặp lại hình ảnh n lần.

Answer 2

Một hack xấu xí có thể chèn nhiều lần -statically- cùng một hình ảnh (sử dụng multiple backgrounds):

Ví dụ: Để lặp lại theo chiều ngang một hình ảnh (80x80) ba lần:

background-image: url('bg_texture.png'), 
        url('bg_texture.png'), 
        url('bg_texture.png'); 
background-repeat: no-repeat, 
        no-repeat, 
        no-repeat; 
background-position: 0 top, 
        80px top, 
        160px top; 

Cẩn thận: không làm việc trên IE dưới 9 phiên bản (source).

Answer 3

Bạn có thể kết hợp một jQuery nhỏ với CSS để đạt được những gì bạn muốn.

Giả sử bạn muốn hiển thị hình ảnh foo.png 3 lần theo chiều ngang và 2 lần theo chiều dọc.

CSS:

body { 
    background: url('foo.png'); 
} 

jQuery:

$(document).ready(function() { 
    $('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px'); 
}); 

Ngoài ra, bạn có thể dán đoạn mã tương tự trong $ (window) .resize() để có được một phản ứng năng động.

Answer 4

Tôi không chắc những gì ban đầu tạo động lực cho câu hỏi này, nhưng tôi thấy nó tìm kiếm một cách để đảm bảo chỉ có một số bản sao của hình nền xuất hiện (nghĩa là không cắt thành viên cuối cùng của một tập hợp lặp lại hình nền.) Điều đó có thể đạt được thông qua thuộc tính background-repeat: space.