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

Question

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

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

И я хочу исправить повторения в такой схеме:

Проверьте игровую площадку JSFiddle

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

Answer 1

Я предполагаю, что корабль в значительной степени отплыл, но все же есть решение, основанное на data-URI.

Вы можете сгенерировать SVG, содержащее ваше изображение, размер которого больше, чем у изображения (например, чтобы сделать поле 60px, просто сделайте ширину равной ширине изображения (40px) + желаемое поле (60px) = 100px):

Следующий шаг - встраивание вашего изображения в 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;
}

Смотрите обновленную скрипку.

Можно сказать, что это довольно большой и грязный обходной путь. Однако это чисто CSS-решение, которое не требует создания дополнительных элементов HTML / JavaScript. У него есть некоторые недостатки:

1. Вам нужно встроить изображение с data-URI. Это, вероятно, не то, что вы хотели бы делать часто.
2. Решение выглядит немного тяжелым.
3. Для IE9 вам необходимо закодировать SVG как URL.

Возможным решением всех этих проблем является использование CSS препроцессоров, например, Sass. Вы можете сделать миксин, например:

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

Answer 2

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

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

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

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

Answer 3

Еще одна запоздалая идея, она может помочь в тех случаях, когда пробелы не слишком велики:

Если общая ширина промежутков между изображениями не превышает ширины одного изображения, вы можете использовать

      background-repeat: space;

фоновый повтор на MDN