html - 在 CSS 中使用重复图像渲染草地

Question

我想创建一大片草地，只使用一系列以巧妙方式重复的小块或切片。我想the cicada principle可用于实现此目的，但我不确定如何将其应用于草地效果。

作为一个具体的例子，考虑这张图片:

任何人都可以使用小尺寸的切片或正方形(例如，只有几个像素宽的切片，或者如果它们是水平的，只有几个像素高的切片，或者 5x5 或更小的正方形)来重新创建这个？最终产品不必与原件完全匹配，只需看起来相似即可。该解决方案应该能够创建一个能够填满任何所需尺寸的 div 的草地。现场的任何重复都应该是无缝的，并且一眼就很难察觉(就像上面链接中的窗帘示例一样)。

感谢您的帮助。

Answer 1

首先创建一个无缝图案图像用作背景。参见 this例如教程。

当您拥有无缝图案图像时，只需将其用作 div 中的背景，并使用 background-repeat css-property 重复它。

.your-div
{
background-image:url('seamless-pattern-image.png');
background-repeat:repeat;
}