html - 全屏固定背景图像滚动显示问题

Question

我的投资组合页面上的全屏固定背景图片出现了一个小问题。在它的顶部是两个 div，一个介绍和一个描述，由一个间隙分隔 - 显示背景图像。

为了创建显示图像的间隙，我只是在介绍 div 的底部添加了一个大边距。在浏览器全屏的高分辨率屏幕上，这看起来很完美，但是我注意到在较低分辨率的屏幕上(或者当浏览器窗口的高度降低时)背景图像似乎没有填满窗口的整个高度，因为在描述 div 上方添加了很多空白区域。

任何阻止这种情况发生的建议，或者是否有更好的方法来实现这种简单的效果并确保其响应，我们将不胜感激。谢谢

Answer 1

这对你有用吗？它在 Firebug 中对我来说看起来不错，但可能不是您想要的；

#appBg {
    background: url("../images/app-banner2.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

我还建议重新拍摄背景图像，让拿着手机的手更居中。