CSS - 背景图像水平拉伸并垂直重复？

Question

使用

background-size: cover

我可以使背景拉伸以适合页面的整个宽度。

使用

repeat-y

我可以使背景重复或垂直平铺到页面的整个高度。

有什么办法可以将这两种效果结合起来吗？不幸的是，它们似乎不能一起工作（至少在 Chrome 中）。看来我可以用

background-size: cover

在两个方向上拉伸，或者不在 x 方向拉伸但在 y 方向重复。

编辑：使用

background-size: 100% Npx

（其中 N 是图像的高度）我可以完成上述操作，但它会倾斜背景图像，因为它仅在一个方向上拉伸。有没有办法让它按比例缩放？

Answer 1

不要覆盖，而是使用

background-size: 100% auto;

将背景图像调整为整个浏览器宽度，同时保持其高度的纵横比。

您可以将其与

background-repeat: repeat-y;

结合使用以垂直平铺它，但请注意，如果您不覆盖

background-repeat

，这也将是此处的默认行为。