Javascript 重复背景固定距离

我想在CSS中用空白重复我的背景图像，因此图像之间有一个固定的距离。我曾尝试使用svg解决此问题，但如果我这样做，它根本不会显示任何背景图像：

正文{
背景图像：url（“数据：图像/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg'xmlns:xlink='1！'http://www.w3.org/1999/xlink'width='100'height='40'%3E%3Cpath xmlns='10'http://www.w3.org/2000/svg“d='M0,0h1v1H0'填充='%23008000'/%3E%3C/svg%3E”）；
最小高度：100vh；
}

我想出了一个有效且非常简单的解决方案。 首先，您不需要为重复背景添加边距

戏法 通过在背景图像中添加要重复的边框，可以创建边距。边框的颜色将与父背景相同。因此，边界将不可见，您所期望的结果将实现

正文{
背景：#f00 url（“https://www.pngitem.com/pimgs/m/7-70908_square-shadow-border-white-vector-lines-edit-square.png"); 
背景尺寸：50px 100px；
位置：固定；
填充：100px；
}

你好，世界！
w3背景图像示例

背景图像只显示了一次，但它让读者感到不安
 

一个解决方案使用了

元素（）

，但支持率仍然很低。诀窍是创建和基本div，其中包含一个用作背景图案的图像，然后只需调整该div内的填充

以下是一个仅适用于Firefox的示例：

#图像{
填充：0 10px 15px 0；/*控制此处的间隙*/
显示：内联块；
}
梅因先生{
高度：100vh；
背景：-moz元素（#图像）0 0/200px自动；
}
身体{
保证金：0；
}

我对问题进行了编辑，以修复url并显示预览。这就是你想要的吗？如果是这样，那么答案是你的背景图像代码是错误的。当您想使用svg作为数据uri图像时，您需要对实体进行html编码。使用CSS Background–Clip属性并将其设置为padding box允许使用边框。这可以在浮动div上完成，因此允许轻松更改保证金。稍后我将能够发布更多完整的答案。不幸的是，我需要能够在以后的JavaScript中更改此间距，因此这不是解决我问题的有效方法。