现在,我们希望网站上的背景图像始终覆盖整个浏览器窗口。
具体要求如下:
- 用图像填充整个页面(无空白)
- 根据需要缩放图像
- 在页面上居中图像
- 不引发滚动条
下面的例子显示了如何实现它:使用 <html>
元素(<html>
元素始终至少是浏览器窗口的高度)。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小:
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}