如何制作自定义的textiled背景

Question

＆lt; ------这是我在Photoshop中制作的图像......

它基本上是一个160 x 160的白色盒子，带有纹理。

下面是CSS中“background-repeat”的样子。我希望它能够平衡。纺织品必须具有一定的百分比，或原盒的大小？它是一个完美的可重复纹理？

我自己试图这样做，因为我找不到符合风格的网格图案。

问题：在Photoshop中制作纹理的技巧是什么，在重复时显示为平衡的整体背景？

如果你看下面它生效的图像，在我工作的最基本的开始，你可以注意到它不太合适。

任何和所有帮助都非常感谢。提前谢谢。

Answer 1

查看图片的左上角。您会注意到暗线从顶部开始大约4-5个像素。然后看看右上角，你会注意到顶线从顶部开始可能只有2px。

当此图像并排重复两次时，将断开连接。只需剪裁图像并剃除两三个像素，直到线条连接为止。重复裁剪图像底部以进行垂直对齐。

如果要通过实验进行此操作，请增加画布的大小，并将模式复制到新的160x160图层中。将它们并排放置，然后一次移动一个像素，使它们重叠。重叠对齐的位置是裁剪图像的位置。

Answer 2

如果您希望网页的背景更好地使用repeating-linear-gradient。它非常容易实现，下载的资产更少，it is supported by major browsers。