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

要将背景图像保持在手机屏幕的底部，尤其是在屏幕方向改变时，可以使用CSS来确保背景图像始终固定在视口的底部。以下是一个示例代码，展示了如何实现这一点：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Background at Bottom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background"></div>
    <div class="content">
        <!-- Your content goes here -->
    </div>
</body>
</html>

CSS (styles.css)

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.background {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Adjust the height as needed */
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1;
    padding: 20px;
}

解释

HTML结构：
- background 类用于包含背景图像。
- content 类用于放置页面的主要内容。

CSS样式：
- html, body 设置高度为100%，并移除默认的边距和填充，以确保背景图像能够覆盖整个视口。
- .background 使用 position: fixed 将背景图像固定在视口的底部。bottom: 0 确保图像始终位于底部，left: 0 和 width: 100% 确保图像宽度覆盖整个屏幕。background-size: cover 和 background-position: center bottom 确保图像按比例缩放并居中显示在底部。
- .content 设置相对定位，并使用 z-index: 1 确保内容显示在背景图像之上。