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;结合使用可以垂直平铺它。