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

Question

使用 background-size: cover 我可以使背景拉伸(stretch)以适应页面的整个宽度。

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

有什么办法可以结合这两种效果吗？不幸的是，它们似乎不能一起工作(至少在 Chrome 中)。看来我可以使用 background-size: cover 在两个方向上拉伸(stretch)，或者不在 x 方向上拉伸(stretch)但在 y 方向上重复。

编辑:使用 background-size: 100% Npx(其中 N 是图像的高度)我可以完成上述操作，但它会扭曲背景图像，因为它只在一个方向上拉伸(stretch)。有没有办法让它按比例缩放？

Answer 1

代替封面，使用 background-size: 100% auto; 将背景图像调整为整个浏览器宽度，同时保持其高度的纵横比。将其与 background-repeat: repeat-y; 结合使用以垂直平铺。