CSS背景重复

Question

假设我的图像宽度和高度为1700 x 1129px。什么是能够重复此图像的最佳方式，以便您无法确定它是否已被重复。我尝试过使用repeat-y，但它看起来像是另一个图形。

Answer 1

与css无关。您的图片不允许重复。要重复没有不良影响的图像，您的图像必须在您想要重复的方向上具有相同的开始和结束。

Answer 2

有一个非常简单的诀窍：以静态颜色（例如黑色或深棕色）结束图像边，将背景图像居中并填充背景颜色

body { background: black url(image.png) no-repeat center top; }

Answer 3

您必须制作无缝图像，这意味着图像的上边缘和下边缘以及左右边缘完美匹配其相对边缘，因此没有角度和颜色过渡可见。使用background-repeat的css方法完全没问题。

这通常用于CG，主要是在3D世界中。 有很多关于使图像无缝的教程，找到一个here。

Answer 4

使用background-size属性。

如果你有一个你认为可以通过水平重复伪装的背景，那么请执行以下操作。

background-size: 50% 100%; background-repeat: repeat-x;

如果您认为可以通过垂直重复来伪装背景，请执行以下操作：

background-size: 100% 50%; background-repeat: repeat-y;