使用CSS或图像的备用位置圆背景图案[关闭]

Question

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

[3天前关闭。

如果有可能，如何在CSS的替代位置中制作圆圈背景（内部有圆圈）。或图像图案。

我试图制作这样的圆形图像图案。然后在我的CSS中，它会重复执行，但我想将此作为替代职位。有什么办法解决吗？

这是我制作的图像：

这是重复图像的输出：

---

预期：

目标是使第一行在其他位置开始于不同的x位置。如果可以使用CSS，那就更好了，因为它的加载速度比图像要快得多。 :)

Answer 1

用repeating-radial-gradient创建圆圈，然后用background-position播放。为了使第一行与其他行的位置不同，请使其另一层渐变，并赋予其不同的background-position。像这样：

body {
width: 100%;
height: 100vh;
margin:0;
background: radial-gradient(#FAC766 0px, #FAC766 13px, #C9E6F4 13px, #C9E6F4 25px, white 25px, white) repeat-x, linear-gradient(white, white) no-repeat, repeating-radial-gradient(#FAC766 0px, #FAC766 13px, #C9E6F4 13px, #C9E6F4 25px, white 25px, white) repeat;
background-size: 50px 50px, 100% 50px, 50px 50px;
background-position: -25px 0, 0 0, 0 0;

}

说明

• 在所有页面上放置圆圈的重复渐变
• 将其放在白色渐变上以覆盖第一行的空间
• 放入另一个圆的渐变，这次仅在x-axis上重复，并且背景位置不同。这将在白色渐变上呈现，而不是原始的圆圈

Answer 2

用repiting-radial-gradient创建圆圈，然后用background-position玩

body {
width: 100%;
height: 100vh;
margin:0;
background-image: repeating-radial-gradient(#FAC766 0px, #FAC766 13px, #C9E6F4 13px, #C9E6F4 25px, white 25px, white);
background-size: 50px 50px;
background-position: -15px -15px;
}