CSS, расстояние повтора фона

Я хочу установить background-image, но с определенным расстоянием между повторениями.

Например, у меня есть это изображение, чтобы стать background-image:

И я хочу исправить повторения в шаблоне следующим образом:

Я ищу чистое решение CSS3, а не JS, а не дополнительные элементы и т.д. Если мне нужно использовать очень современные CSS3 (не поддерживаемые) трюки, это нормально.

Ответ 1

Я думаю, что корабль довольно сильно отплыл, но все же есть решение, основанное на 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. Он имеет некоторые недостатки:

Вам нужно встроить изображение с URI данных. Это, вероятно, не то, что вы хотели бы сделать часто.
Решение выглядит немного тяжелым.
Для 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, см., например, в этой статье, чтобы узнать больше об этом процессе. Это уже выглядит лучше и удобнее в использовании.

Ответ 2

Вам нужно использовать атрибут space в background-repeat (CSS3)

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

Не все браузеры поддерживают его, и он выглядит как только для вертикального пространства на образцах.

Лучше всего было бы изменить фоновое изображение, чтобы иметь необходимое пространство вокруг фактического изображения (заполнение изображения пустой областью)