如何更改模式中给定背景图像之间的间距.该图像是强制性的在线

Question

我只使用在线图像制作这个背景，并希望控制图案中图像之间的空间。有没有办法只使用 CSS 来实现这一点？我知道您可以使用round和space但一般来说，专门控制它们之间的空间量会更有用。

代码如下：

div {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size: 50px;
background-attachment: fixed;
}

<div class="background-pattern">
</div>

在这项研究中，我发现了关于背景的非常酷的帖子，这非常有用：https://24ways.org/2011/css3-patterns-explained

Answer 1

由于它是一个SVG，只需增加background-size就可以创建空间，因为SVG将尝试保持其比率：

div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size: 50px 100px;
background-attachment: fixed;
}
body {
margin:0;
}

<div class="background-pattern">
</div>

或

div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size: 100px 50px;
background-attachment: fixed;
}
body {
margin:0;
}

<div class="background-pattern">
</div>

您还可以与渐变结合使用以隐藏一些图案，从而对空间进行更多控制：

div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: 
repeating-linear-gradient(to bottom,transparent 0,transparent 50px,#fff89c 50px,#fff89c 100px),
url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size:100% 100%,100px 50px;
background-attachment: fixed;
}
body {
margin:0;
}

<div class="background-pattern">
</div>

这是另一个示例，您可以在其中使用背景两次以获得另一种模式：

div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: 
repeating-linear-gradient(to bottom,transparent 0,transparent 50px,#fff89c 50px,#fff89c 100px),
url("https://image.flaticon.com/icons/svg/869/869078.svg"),
url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size:100% 100%,150px 50px, 150px 50px;
background-position:left top,left top, 60px 0;
background-attachment: fixed;
}
body {
margin:0;
}

<div class="background-pattern">
</div>

通过结合上述所有技术，您可以完全控制图案之间的空间。