javascript - 重复背景固定距离

Question

我想在 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 解决方案来解决这个问题？
我可以动态设置边距也很重要，因此为图像添加边框对我不起作用。
谢谢！

Answer 1

使用一种解决方案，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>

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

交互式示例：

$("#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">

Answer 2

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

诡计

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

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 背景重复属性的更多信息。