31

我想设置一个background-image但重复之间的特定距离。

例如，我有这个图像成为background-image：

在此处输入图像描述

我想以这样的模式修复重复：

在此处输入图像描述

检查JSFiddle 游乐场

我正在寻找一个 CSS3 干净的解决方案，而不是 JS，不是额外的元素，等等。如果我必须使用非常现代的 CSS3（不支持）技巧是可以的。

4

1 回答 1

12

我猜这艘船已经航行得差不多了，但仍然有一个基于 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 预处理器，例如 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 手动编写它，请参阅本文以了解有关此过程的更多信息。这已经看起来更好，使用起来更舒适。

于 2015-09-15T07:39:20.400 回答