CSS，背景重複距離

Question

我想設置一個background-image但重複之間有特定的距離。

例如，我有這樣的形象成爲background-image：

我要修復的重複在這樣的模式：

檢查JSFiddle playground

我正在尋找一個CSS3 clean soluti不是JS，也不是額外的元素，等等。如果我必須使用非常現代的CSS3（不支持）技巧就沒問題。

Answer 1

您需要使用space屬性的背景重複（CSS3）

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

並非所有的瀏覽器都支持它，它看起來像由樣本圖片，其只對垂直空間。

更好的選擇將是修改的背景圖像本身具有實際影像四周的所需空間（填充空白區域的圖像）

Answer 2

我想船已經非常航行，但仍然存在基於data-URI的解決方案。

可以生成包含圖像，其具有的尺寸大於圖像更大的SVG（例如，使餘量60像素只是做一個寬度等於所述圖像（40像素的寬度）+所需的餘量（60像素）= 100像素）：

下一步是嵌入圖像的SVG內：

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

最後加入這個SVG作爲背景圖像與數據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; 
} 

查看最新的Fiddle。

可以說這是一個相當大和骯髒的解決方法。然而，這是一個純粹的CSS解決方案，不需要創建額外的HTML元素/ JavaScript。它有一些缺點：

1. 您需要使用data-URI嵌入圖像。這可能不是你想要經常做的事情。
2. 該解決方案看起來有點沉重。
3. 對於IE9，您需要將SVG編碼爲URL。

所有這些問題的可能解決方案是使用CSS預處理器，例如，薩斯。您可以製作混音，例如：

@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='); 
} 

您可以在此處添加許多內容，例如，所有其他邊距值，您可以對圖像進行編碼以注入圖像，而不是使用Compass手動編寫圖像，請參閱this article瞭解更多關於這個過程。這已經看起來更好，更舒適。