javascript - 在网页上缩放的背景图像

Question

wetransfer网站通常会在您调整浏览器大小时缩放背景图像。我想以最简单的方式达到同样的效果。换句话说，如果我拖动浏览器窗口的底 Angular ，我希望背景图像的大小相应地改变。

谢谢!

Answer 1

您可以按照 tutorial 中的说明执行此操作.

在教程中，简单的 CSS 方法是使用 background-size 属性。

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Cover 可让图像在保持纵横比的同时进行拉伸(stretch)，以便充分利用包含区域的一维。替代值是包含，它以其纵横比拉伸(stretch)图像以完全适合该区域，或者 100% 100% 拉伸(stretch)图像同时破坏纵横比。

您可能还想看看 w3schools 上的 CSS 3 引用资料。