在 CSS 中，有一种方法可以做到这一点，而无需手动创建副本或对位置进行任何计算，方法是利用 CSS background 属性。
CSS 中的背景默认是可重复的，如果我们使用 background 或 background-image 创建对象，无论它们的位置如何，它们都可以自动平铺。
element {
background-image:
radial-gradient(#6155a6 30%, transparent 0);
background-size: 100% 100%;
background-repeat: repeat;
}创建图案背景
我们从指定用于平铺的片段的大小开始。这是必不可少的一步，因为它决定了图案的可重复空间。
element {
width: 180px;
height: 180px;
}在背景中使用radial-gradient径向渐变创建一个圆形对象。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0);
}即使你看不到边缘，圆圈也会正确平铺。使用 background-position 将它移动到其他地方。不用担心越界，浏览器已经帮我们搞定了。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0);
background-position: -110px -20px;
}我们可以通过添加更多背景图像来添加更多对象。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 10%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
}此元素可用于通过平铺制作无缝图案。唯一的问题是元素本身不能像背景图像那样容易地平铺。我们需要创建许多相同的元素并将它们放置在网格中。虽然截取元素的屏幕截图并将其保存为 PNG 格式是一个快速的解决方案。
使用 CSS 涂鸦
css-doodle 提供令人兴奋的功能之一是能够使用 @doodle 函数从另一个 css-doodle 元素生成背景图像。如果我们在 css-doodle 中创建图案片段，它可以用于背景图像。这意味着图案片段可以平铺。
@grid: 1 / 100% 180px;
background-size: 180px 180px;
background-image: @doodle(
@grid: 1 / 100%;
background-image:
radial-gradient(#6155a6 30%, transparent 0),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 5%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
);
使用渐变来创建形状是相当有限的。幸运的是，@doodle 函数可以嵌套。例如，我们可以将其中一个由 radial-gradient 创建的圆形对象替换为另一个 css-doodle 元素，里面是一个旋转 30 度的心形。
background-image: @doodle(
background-image:
@doodle(
@grid: 1 / 100%;
@size: 80px;
margin: auto;
background: pink;
@shape: heart;
transform: rotate(30deg);
),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 5%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
);
如何在实际开发中使用它
我建议使用 PS 和 AI 等设计工具创建图案背景，但直接从代码创建一些东西仍然很有趣。所以这里有两种方法可以将它应用到您的网站：
1)、在 CSS 或 css-doodle 中创建图案背景片段并截取 DOM 元素，或使用 css-doodle 的 export() API 将图案片段保存为图像。
.container {
background-image: url(pattern.png);
background-size: ;
}2)、直接导入并使用 css-doodle。
<style>
css-doodle {
--pattern: (
);
}
</style>
<css-doodle use="var(--pattern)"></css-doodle>
我希望这篇文章很好地解释了我们如何利用 CSS 背景重复和 css-doodle 来创建无缝背景图案。有无数种方法可以形成对象，所以我可以想象这是一种非常有用的技术。
当然，最终我们选择那种方式来实现，都是根据我们具体的开发项目与自己本身所掌握的技术。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
