如何制作自定义纺织背景

How to make a custom textiled background

<------这是我在 Photoshop 中制作的图像...

它基本上是一个应用了纹理的 160 x 160 白色盒子。

下面是 CSS 中 "background-repeat" 的样子。我希望它能平衡。纺织品是否必须达到一定百分比或原包装盒的尺寸?让它成为完美的可重复纹理?

我正在尝试自己做这个,因为我找不到适合这种风格的网格图案。

问题:在 Photoshop 中制作纹理时,在重复时显示为平衡的整个背景的技巧是什么?

如果您查看下图的效果,在我工作的最基本的开始,您会发现它不太适合。

非常感谢任何帮助。提前致谢。

查看图片的左上角。您会注意到,暗线从距顶部大约 4-5 个像素处开始。然后查看右上角,您会注意到顶线从顶部开始大约 2px。

当此图像并排重复两次时,将出现断开连接。只需裁剪图像并削掉两三个像素,直到线条连接起来。重复裁剪图像底部以进行垂直对齐。

如果您想以实验方式进行此操作,请增加 canvas 的大小,并将图案复制到一个新的 160x160 图层中。将它们并排放置,然后一次移动一个像素,使它们重叠。重叠对齐的地方就是您应该裁剪图像的地方。

如果您想要网页的背景,最好使用 repeating-linear-gradient. It is very easy of implement, less assets to download and it is supported by major browsers