CSS，背景重复距离 [英] CSS, background-repeat distance

问题描述

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

I want to set a background-image but with an specific distance between the repetitions.

，我有这个图像成为背景图像：

For example, I have this image to become a background-image:

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

And I want to fix the repetitions in a pattern like this:

检查 JSFiddle操场

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

I'm looking for a CSS3 clean solution, not JS, not extra elements, and so forth. If I have to use very modern CSS3 (un-supported) tricks is ok.

推荐答案

，但仍然有一个基于data-URI的解决方案。

I guess the ship has pretty much sailed, but still there is a solution based on data-URI.

您可以生成一个包含您的图像的SVG，其大小大于图像（例如， 60px只是使宽度等于图片的宽度（40像素）+所需的边距（60像素）= 100像素）：

You can generate an SVG containing your image which has a size greater than the image (e.g. to make the margin 60px just make a width equal to the width of the image (40px) + the desired margin (60px) = 100px):

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

The next step is embedding your image inside of the SVG:

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

最后，将此SVG作为背景图像与数据URI添加：

And finally add this SVG as a background-image with the data 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。它有一些缺点：

One can say this is quite a big and dirty workaround. However this is a pure CSS solution which does not require creating of additional HTML elements / JavaScript. It has some disadvantages:

1. 您需要使用data-URI嵌入图像。


2. 解决方案看起来有点重。


3. 对于IE9，您需要对SVG作为URL。

所有这些问题的可能解决方案是使用CSS预处理器，例如Sass。您可以制作混合，例如：

Possible solution to all these problems is using CSS preprocessors, e.g. Sass. You can make a mixin, e.g.:

@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手动编写图像。 本文更多关于这个过程。这已经看起来更好，更舒适的使用。

You can add here many things, e.g. all other margin values, you can encode the image to inject it instead of writing it manually using Compass, see e.g. this article to learn more about this process. This already looks way better and more comfortable to use.

这篇关于CSS，背景重复距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！