我正在使用可缩放背景图像以适合浏览器窗口的网站,但是在小型浏览器窗口上查看时出现问题。
当页面最初加载在高浏览器窗口上时,图像会正确锚定在浏览器窗口的底部,并在调整窗口大小时缩放(即,包含整个页面时就可以了)。但是,如果页面长度超过初始窗口高度,则在滚动页面时,图像会向上滚动,从而留出间隙。
这是一个演示页面(首先尝试用高窗,然后是短窗,刷新并向下滚动以查看问题):
http://kevin-atkins.co.uk/slc/about-us.html
如何在滚动时使背景图像适合浏览器窗口的底部和/或不留间隙?
最佳答案
您需要指定width \ height,以便可以正确调整自身大小。
就像使用css设置背景一样,可以使用CSS3 Background Size。大多数现代浏览器都支持它,如下所示:
#about-us {
background-size: 100%;
}
另外,您也可以正确使用图片标记和样式(宽度\高度),占用100%
参考:
背景尺寸https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
希望这可以帮助。
关于css - 如何使此背景图片适合页面底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17031001/