CSS, tło-powtórzyć odległość

Question

Chcę ustawić background-image, ale z określoną odległością między powtórzeniami.

Na przykład, mam ten obraz do zostania background-image:

I chcę naprawić powtórzeń w układzie jak ten:

Check the JSFiddle playground

Poszukuję czystych soluti CSS3 na, nie JS, nie dodatkowe elementy, i tak dalej. Jeśli będę musiał używać bardzo nowoczesnych sztuczek CSS3 (nieobsługiwanych) jest w porządku.

Answer 1

trzeba użyć atrybutu space w background-repeat (CSS3)

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

Nie wszystkie przeglądarki obsługują go, i wygląda jak jej tylko do pionowej przestrzeni przez próbkę zdjęć.

Im lepiej wybrał byłoby zmodyfikować sam obraz tła mieć potrzebną przestrzeń wokół rzeczywistego obrazu (wyściółka obraz z pustego obszaru)

Answer 2

Chyba statek dość dużo pływał, ale nadal istnieje rozwiązanie oparte na danych-URI.

Możesz wygenerować SVG zawierający obraz, który ma rozmiar większy niż obraz (np. Aby margines 60px zrobił tylko szerokość równą szerokości obrazu (40px) + pożądany margines (60px) = 100px):

następnym krokiem jest umieszczenie na swoim dysku wewnątrz SVG:

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

I wreszcie dodać SVG jako tło wizerunku z danymi 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; 
} 

Zobacz zaktualizowaną wersję Fiddle.

Można powiedzieć, że jest to dość duże i brudne rozwiązanie. Jest to jednak czyste rozwiązanie CSS, które nie wymaga tworzenia dodatkowych elementów HTML/JavaScript. Ma pewne wady:

1. Musisz osadzić obraz z danymi-URI. Prawdopodobnie nie jest to rzecz, którą chciałbyś robić często.
2. Rozwiązanie wygląda nieco ciężko.
3. W przypadku IE9 należy zakodować SVG jako adres URL.

Możliwe rozwiązanie wszystkich tych problemów za pomocą preprocesorów CSS, np. Sass. Możesz utworzyć mixin, np .:

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

Możesz dodać tutaj wiele rzeczy, np.wszystkie inne wartości marginesów, możesz zakodować obraz, aby go wstrzyknąć, zamiast pisać ręcznie za pomocą kompasu, patrz np. this article, aby uzyskać więcej informacji na temat tego procesu. To już wygląda o wiele lepiej i wygodniej w użyciu.