CSS，背景重复距离

Question

我想设置一个带有特定重复距离的background-image。

例如，我有这张图片需要成为background-image：

我想要将重复固定在这样的模式中：

请查看JSFiddle playground 我正在寻找CSS3清洁解决方案，不需要使用JS、额外元素等。如果必须使用非常现代的CSS3（不受支持）技巧也可以。

- fguillen

Answer 1

我想这个问题可能已经解决了，但仍然可以使用数据URI来解决。

您可以生成一个包含图像的SVG，其大小大于图像（例如，要将边距设置为60px，只需将宽度设置为图像宽度（40px）+所需边距（60px）= 100px）：

下一步是将图像嵌入到SVG中：

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

最后，使用数据URI将此SVG添加为background-image：

#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预处理器，例如Sass。您可以创建一个mixin，例如：

@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，请参见本文以了解更多信息。 这看起来已经更好并且更舒适使用。

- smnbbrv

Answer 2

另一个迟来的想法，它可能有助于在间隙不太大的情况下：

如果图像之间的总间隙宽度不超过一个图像宽度，则可以使用

background-repeat: space;

MDN上的background-repeat

- prkos