CSS，背景重复距离
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16875466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS, background-repeat distance
提问by fguillen
I want to set a background-imagebut with an specific distance between the repetitions.
我想设置一个background-image但在重复之间有一个特定的距离。
For example, I have this image to become a background-image:
例如，我有这个形象成为一个background-image：
And I want to fix the repetitions in a pattern like this:
我想以这样的模式修复重复：
Check the JSFiddle playground
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.
我正在寻找一个 CSS3 干净的解决方案，而不是 JS，而不是额外的元素等等。如果我必须使用非常现代的 CSS3（不支持）技巧也可以。
回答by smnbbrv
I guess the ship has pretty much sailed, but still there is a solution based on data-URI.
我猜这艘船已经航行了很多，但仍然有一个基于数据 URI 的解决方案。
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，其尺寸大于图像（例如，要使边距为 60 像素，只需使宽度等于图像的宽度（40 像素）+ 所需的边距（60 像素）= 100 像素）：
The next step is embedding your image inside of the SVG:
下一步是将您的图像嵌入到 SVG 中：
<image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" />
And finally add this SVG as a background-image with the data URI:
最后将此 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;
}
See the updated Fiddle.
请参阅更新的Fiddle。
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:
可以说这是一个相当大而肮脏的解决方法。然而，这是一个纯 CSS 解决方案，不需要创建额外的 HTML 元素/JavaScript。它有一些缺点：
- You need to embed the image with the data-URI. This is probably not the thing you would like to do often.
- The solution looks a bit heavy.
- For IE9 you would need to encode the SVG as a URL.
- 您需要使用 data-URI 嵌入图像。这可能不是您愿意经常做的事情。
- 该解决方案看起来有点沉重。
- 对于 IE9，您需要将 SVG 编码为 URL。
Possible solution to all these problems is using CSS preprocessors, e.g. Sass. You can make a mixin, e.g.:
所有这些问题的可能解决方案是使用 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=');
}
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 articleto learn more about this process. This already looks way better and more comfortable to use.
您可以在此处添加许多内容，例如所有其他边距值，您可以对图像进行编码以注入它，而不是使用 Compass 手动编写它，请参阅例如这篇文章以了解有关此过程的更多信息。这看起来更好，使用起来更舒适。
回答by Patrick Evans
You need to use the spaceattribute in the background-repeat (CSS3)
您需要space在 background-repeat (CSS3) 中使用该属性
http://www.impressivewebs.com/space-round-css3-background/
http://www.impressivewebs.com/space-round-css3-background/
Not all browsers support it, and it looks like its only for vertical space by the sample pictures.
并非所有浏览器都支持它，并且它看起来仅用于示例图片的垂直空间。
The better chose would be to modify the background image itself to have the needed space around the actual image (padding the image with blank area)
更好的选择是修改背景图像本身以获得实际图像周围所需的空间（用空白区域填充图像）
