我正在使用可缩放背景图像以适合浏览器窗口的网站,但是在小型浏览器窗口上查看时出现问题。

当页面最初加载在高浏览器窗口上时,图像会正确锚定在浏览器窗口的底部,并在调整窗口大小时缩放(即,包含整个页面时就可以了)。但是,如果页面长度超过初始窗口高度,则在滚动页面时,图像会向上滚动,从而留出间隙。

这是一个演示页面(首先尝试用高窗,然后是短窗,刷新并向下滚动以查看问题):

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/

10-13 01:56
查看更多