重复背景固定距离答案

【问题标题】：Repeating Background Fixed Distance重复背景固定距离
【发布时间】：2021-03-22 14:15:17
【问题描述】：

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

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100' height='40'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' d='M0,0h1v1H0' fill='%23008000'/%3E%3C/svg%3E");
  min-height: 100vh;
}

也许有一个 JavaScript 解决方案可以解决这个问题？
我可以动态设置边距也很重要，因此向图像添加边框对我不起作用。
谢谢！

【问题讨论】：

我对问题进行了编辑以修复 url 并显示预览。那是你要的吗？如果是这样，那么答案是您的背景图像代码错误。当您想使用 svg 作为 data-uri 图像时，您需要对实体进行 html 编码。
使用 CSS 背景 - 剪辑属性并将其设置为填充框允许边框。这可以在浮动 div 上完成，因此可以轻松更改边距。稍后我将能够发布更完整的答案。

标签： javascript html css svg background-image

【解决方案1】：

我想出了一个可行且非常简单的解决方案。第一件事就是这样，你不需要为重复的背景添加边距。

技巧

您可以通过向您想要重复的背景图片添加边框来创建边距。 边框颜色将与父背景相同。因此边框将不可见，并且会达到您想要的结果。

body {
  background: #f00 url("https://www.pngitem.com/pimgs/m/7-70908_square-shadow-border-white-vector-lines-edit-square.png"); 
  background-size: 50px 100px; 
  position: fixed;
  padding: 100px;
}

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

详细了解CSS background-repeat property。

【讨论】：

不幸的是，我需要稍后在 JavaScript 中更改此间距，所以这不是我的问题的有效解决方案。

【解决方案2】：

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

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

#image {
  padding: 0 10px 15px 0; /* control the gap here */
  display:inline-block;
}

.main {
  height: 100vh;
  background: -moz-element(#image) 0 0/200px auto;
}

body {
  margin: 0;
}

<div class="main">

</div>


<div style="height:0;overflow:hidden;">
  <div id="image">
    <img src="https://picsum.photos/id/1024/300/300">
  </div>
</div>

宽度 SVG 你可以尝试如下：

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="bgimg" x="0" y="0" width="120" height="130"  patternUnits="userSpaceOnUse">
      <image xlink:href="https://picsum.photos/id/1055/100/100.jpg" x="0" y="0" height="100" width="100" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="10000" height="10000" fill="url(#bgimg)" />
</svg>

您只需要控制图案元素的宽度/高度即可控制距离。在上面，我们在120x130 矩形内有一个100x100 图像，因此每个图像之间的距离为20 和30

一个交互式示例：

$("#x").on("change", function() {
  $('#bgimg').attr("width",100+parseInt($(this).val()))
});

$("#y").on("change", function() {
  $('#bgimg').attr("height",100+parseInt($(this).val()))
});

svg {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="bgimg" x="0" y="0" width="100" height="100"  patternUnits="userSpaceOnUse">
      <image xlink:href="https://picsum.photos/id/1055/100/100.jpg" x="0" y="0" height="100" width="100" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="10000" height="10000" fill="url(#bgimg)" />
</svg>


<input type="range" min="0" max="100" step="5" id="x" value="0">
<input type="range" min="0" max="100" step="5" id="y" value="0">

【讨论】：