Question

哇。用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

这看起来似乎很完美，但是当您稍微滚动一下时，Android浏览器会隐藏地址栏，然后不会调整背景大小。这会导致页面底部的区域未被背景图像覆盖。

正如我所说，上面的演示效果很好。

我的页面和演示之间有什么区别？有想法吗？

Answer 1

我容易发现的差异是...

CSS-Tricks版本：html和body没有高度或最小高度。

您的版本：html和body都将高度和最小高度设置为100％。

CSS-Tricks版本：正文设置为.nav { height: calc(100vh - 60px); }

您的版本：身体上没有溢出规则。

我建议您准确地复制他们所做的事情，不要添加任何内容，请确保它们按预期工作。然后在您的网站中重新创建它。

如果事实证明是100％的高度和最小高度是问题所在，但您仍需要那些用于粘贴页脚或其他东西。然后，您可以使用辅助包装div来简化页脚。就像将高度/最小高度规则放在fullwrapper div上一样，然后在其中使用通常具有粘性页脚的pagewrapper。

Answer 2

页面的结构存在一些差异。长话短说，阻止它按预期工作的主要原因是将height分配给HTML元素：100％。如您在这里directly from Google's developers website所读，分配高度：100％为元素赋予显示的条形可用的高度，并且隐藏后不会调整大小。如果您不想修改和更改代码并需要快速的解决方案，只需将HTML高度增加110％，即可获得与比较链接相同的效果。

移动Android设备上的CSS背景图像全屏效果不理想

2 个答案: