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

Posted 2023-03-06

【中文标题】CSS - 背景图像水平拉伸并垂直重复？

【英文标题】：CSS - Background image stretch horizontally and repeat vertically?

【发布时间】：2017-04-22 21:05:21

【问题描述】：

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

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

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

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

【问题讨论】：

你可以只用 background-size:100%;

@Chiller 你是对的，但你需要同时指定 x 和 y。即background-size: 100% auto

@ 可能你是对的，但如果你在这里看到它可以在不添加自动 jsfiddle.net/qp4093h2

的情况下工作

【参考方案1】：

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

【讨论】：

由于背景大小 x 是 100% 宽度，它不应该重复 -x，所以你实际上不需要指定重复 -y，只需让它默认......但它没有不疼。

对于那些正在寻找我的人——上面的 auto 属性指定了一个高度，所以如果你像在代码 background-size: 100% 150px; 中那样输入一个固定高度，那么你的图像将水平拉伸，而保持 150px 尺寸。

在我的情况下它不起作用，我将其更改为 background-size: 100% calc(100%)，它对我有用