哇。使用 HTML 和 CSS 创建全屏背景图片有多难? 好像挺难的。至少,互联网上充满了这样的答案 css perfect full screen image background还有这个https://css-tricks.com/perfect-full-page-background-image/ .
事实上,第二个链接的演示也适用于移动 android 设备:https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
但是我还是没有运气。我复制了样式
html {
background: url(/images/snowback.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
到我的样式表 https://aoc-2019.netlify.com/css/retro.css而且,背景图像并不完美:https://aoc-2019.netlify.com
初看起来很完美,但是安卓浏览器会在你稍微滚动时隐藏地址栏,然后背景不会调整大小。这会导致页面底部出现一个区域,该区域未被背景图像覆盖。
正如我所说,上面的演示效果很好。
我的页面和演示有什么区别?有什么想法吗?
最佳答案
页面的结构有几个不同之处。长话短说,阻止它按预期工作的主要因素是将 height: 100% 分配给您的 HTML 元素。你可以在这里阅读 directly from Google's developers website ,分配 height: 100% 为元素提供显示栏的可用高度,并且一旦隐藏就不会调整大小。 如果您不想修改和更改代码并需要快速解决方案,只需将高度添加到 HTML 110%,您将获得与比较链接相同的效果。
关于android - 移动安卓设备上的 CSS 背景图像全屏并不完美,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58895653/