我正在为我的网站使用引导,并使本地滚动正常工作(我使用标准导航条形码)。到目前一切尚好。
接下来,我想要实现一个在桌面和移动设备(iphone、android等)上正常工作的全屏背景。背景图片应覆盖整个屏幕,当用户滚动页面内容时不应移动。我能找到的唯一解决办法(经过相当长时间的搜索)是:
html {
background: url('images/ny-building-xs-optimized.jpg') no-repeat center center fixed !important;
background-size: cover !important;
我正在使用css提示和技巧中的代码来覆盖背景图像。问题是,它会重新缩放图像以适应宽度和高度,并更改纵横比。我希望背景图像重新缩放到全屏宽度,然后只裁剪高度(从图像顶部开始,而不是中心)以覆盖视口。这样,图像的纵横比将保持不变。
我遇到的第二个问题是,它似乎无法工作,除非我使用图片的FQDN,而不仅仅是下面的url。
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o