全屏固定背景图像滚动显示问题答案

【问题标题】：Full screen fixed background image scroll reveal issue全屏固定背景图像滚动显示问题
【发布时间】：2014-09-11 23:35:29
【问题描述】：

我的作品集页面上的全屏固定背景图像存在小问题。最上面是两个 div，一个介绍和一个描述，由一个间隙隔开 - 显示背景图像。

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

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

【问题讨论】：

标签： html css responsive-design background-image z-index

【解决方案1】：

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

#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;
}

我还建议重新拍摄背景图片，以便握住手机的手更中心。

【讨论】：