在web上使用CSS创建无缝模式

Creating a seamless pattern with CSS on the web

本文关键字：创建 模式 CSS web      更新时间：2023-09-26

我正在web上制作一个无缝的CSS模式。我知道这完全是无稽之谈，根本不实用。但这只是为了好玩。

http://codepen.io/vennsoh/pen/iFKyo

我已经创建了我的第一个磁贴。现在我在想一种方法来重复一遍，以填充整个背景。

我可以通过使用HTML和CSS来完成这一壮举吗？或者我必须使用javascript来完成此操作吗？

-

以下是我使用javascript的步骤，请纠正我或建议更好的方法：

  1. 计算当前浏览器的宽度和高度
  2. 单个tile是（150x150），我只需要创建尽可能多的div来覆盖整个屏幕

-

我可能想让东西四处移动，每个多边形都会改变颜色，等等。它不会是静态的。我不是在寻找背景图像解决方案。

谢谢，Venn。

实际上，只有html和css才能实现这一点。示例中的问题是，当您设置background-repeat属性时，背景的每个部分都会重叠，因为它们的大小不同，所以您只需要以不同的方式调整形状的大小和位置。在您的情况下，简单的方法是为每个形状（所需完整图案的大小）设置一个background-size，并相应地更改它们的位置。

我修改了你的部分示例，让你了解它应该是什么样子：http://codepen.io/anon/pen/pnxyd

只需添加，

float:left;

到css，然后只制作div的多个副本，就像这里。。。http://codepen.io/anon/pen/rlDqh

我想这应该能奏效。

相关文章：