10

我正在网络上制作无缝的 CSS 模式。我知道这完全是胡说八道，根本不切实际。但这只是为了玩得开心。

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

我已经完成了我的第一个图块的创建。现在我正在考虑一种重复它以填充整个背景的方法。

我可以仅使用 HTML 和 CSS 来完成这项壮举吗？或者我必须使用 javascript 来完成这个吗？

-

如果使用 javascript，请纠正我或提出更好的方法，这是我的步骤：

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

-

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

谢谢，维恩。

4

2 回答 2

2

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

我已经修改了您的示例的一部分，让您了解它的外观：http ://codepen.io/anon/pen/pnxyd

于 2013-02-05T04:12:57.300 回答
1

只需添加，

float:left;

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

我想这应该可以解决问题。

于 2013-02-05T02:36:02.843 回答