css - 如果手机屏幕是横向的，如何将背景图像保持在底部？

Question

我正在开发一个应该是移动响应的 Angular Web 应用程序。背景图像必须始终位于底部。除了横向的移动设备外，我使所有尺寸都可以做到这一点。

我尝试在 Stack Overflow 中研究样本。我试过这个，但它只适用于其他很棒的设备，但不适用于我遇到的横向问题。

:host {
    display: block;
    position: absolute;
    height: 100%;
    background-image: url(../../../assets/images/...);
    background-position: center bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

发生的情况是，就视口的高度而言，背景图像仅位于底部。它应该在页面的底部，包括页面的滚动高度（因为视图是横向的）。

标签： cssresponsive-designresponsive

Answer 1

您是否尝试过使用背景图片定位 body 标签？

body {
    background-image: url(../../../assets/images/...);
    background-position: center bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
}