使用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;
} 

Answer 2

如果您在PhotoShop中打开图像，只需裁剪3种尺寸的图像，然后将以下结构应用为遮罩。

为了获得更好的效果，请模糊遮罩，使其没有硬边。