css - 垂直拉伸背景图像

Question

我想弄清楚如何垂直拉伸背景图像。我通过以下方式使用带有 3 个图像的 CSS3：

background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top

现在我想将这些图像垂直拉伸到它们一直延伸到底部。有没有办法做到这一点？

Answer 1

我在这里聚会迟到了，但这对我有用：

background-size: auto 100%;

这将垂直适合图像并让宽度做它需要做的任何事情（我认为它默认重复）。您还可以设置：

background-repeat: no-repeat;

它不会在水平方向上重复图像。

Answer 2

尝试：

background-size: 100% 100%;

第一个100%是宽度，第二个是高度。在您的情况下，您需要第二组100%

Answer 3

谢谢你提出这个问题。以下是对我有用的

background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;