CSS, khoảng cách lặp lại nền

Question

Tôi muốn đặt background-image nhưng có khoảng cách cụ thể giữa các lần lặp lại.

Ví dụ, tôi có hình ảnh này để trở thành một background-image:

Và tôi muốn sửa chữa các lần lặp lại trong một mô hình như thế này:

Kiểm tra JSFiddle playground

Tôi đang tìm một bộ lọc sạch CSS3 trên, chứ không phải JS, không phải các yếu tố phụ, v.v. Nếu tôi phải sử dụng các thủ thuật CSS3 (không được hỗ trợ) rất hiện đại thì được.

Answer 1

Bạn cần phải sử dụng thuộc tính space trong background-repeat (CSS3)

http://www.impressivewebs.com/space-round-css3-background/

Không phải tất cả các trình duyệt hỗ trợ nó, và có vẻ như chỉ cho không gian thẳng đứng của mình bằng những hình ảnh mẫu.

Các tốt hơn chọn sẽ được sửa đổi hình nền tự để có không gian cần thiết xung quanh hình ảnh thực tế (đệm hình ảnh với vùng trống)

Answer 2

Tôi đoán con tàu đã khá nhiều thuyền, nhưng vẫn còn một giải pháp dựa trên dữ liệu-URI.

Bạn có thể tạo SVG chứa hình ảnh có kích thước lớn hơn hình ảnh (ví dụ: để làm cho lề 60px chỉ tạo chiều rộng bằng chiều rộng của hình ảnh (40px) + lề mong muốn (60px) = 100px):

bước tiếp theo là nhúng hình ảnh của bạn bên trong của SVG:

<image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" /> 

Và cuối cùng thêm SVG này như một background-image với dữ liệu URI:

#container { 
    width: 300px; 
    height: 100px; 
    border: 1px solid #ccc; 

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="40"><image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" /></svg>'); 
    background-position: left center; 
    background-repeat: repeat-x; 
} 

Xem cập nhật Fiddle.

Người ta có thể nói đây là một giải pháp khá lớn và dơ bẩn. Tuy nhiên đây là một giải pháp CSS tinh khiết không yêu cầu tạo thêm các phần tử HTML/JavaScript. Nó có một số nhược điểm:

1. Bạn cần nhúng hình ảnh với URI dữ liệu. Đây có lẽ không phải là điều bạn muốn làm thường xuyên.
2. Giải pháp có vẻ hơi nặng.
3. Đối với IE9, bạn cần phải mã hóa SVG dưới dạng URL.

Giải pháp khả thi cho tất cả các sự cố này là sử dụng bộ xử lý trước CSS, ví dụ: Sass. Bạn có thể tạo một bản mixin, ví dụ:

@mixin background-image-spaced($width, $height, $margin-right, $image) { 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width + $margin-right}" height="#{$height}"><image width="#{$width}" height="#{$height}" xlink:href="data:image/png;base64,#{$image}" /></svg>'); 
} 

body { 
    @include background-image-spaced(40px, 40px, 60px, 'iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII='); 
} 

Bạn có thể thêm vào đây nhiều thứ, ví dụ:tất cả các giá trị ký quỹ khác, bạn có thể mã hóa hình ảnh để chèn nó thay vì viết nó theo cách thủ công bằng Compass, xem ví dụ this article để tìm hiểu thêm về quy trình này. Điều này đã có vẻ tốt hơn và thoải mái hơn để sử dụng.