0

我知道这里有人问过这样的问题，但是很多现有问题的答案现在已经过时了。我需要的是以下内容：最好只有​​ CSS 和 HTML 的网页，具有固定且居中的背景图像。我使用的背景图像的尺寸是 1024x1024，其想法是图像将在横向和纵向模式下覆盖屏幕。背景图像也必须是固定的，这意味着如果页面上的内容滚动，背景图像不会随着内容滚动。

我有一个几乎可以工作的解决方案：

CSS：

#background {
    background-image: url('background.jpg');
    background-position:center; 
    background-repeat: no-repeat;
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: 0; 
}

HTML：

<body>
    <div id="background"></div>
    <!-- content here -->
</body>

此解决方案在纵向模式下运行良好；固定和居中都可以正常工作。但是当我将 ipad 设置为横向模式时，背景图像不会立即调整大小以填充新宽度，而是在右侧显示一个白色垂直条纹。当我滚动内容时，背景图像会调整大小并正确填充宽度。

有谁知道为什么只有在滚动页面内容时才会调整背景大小，并且有谁知道如何使其正常工作？我只对 iOS 5 中的这个工作感兴趣，所以答案不必考虑其他浏览器或 iOS 4。

4

1 回答 1

3

我想我能帮上忙。我也是移动设计的新手，但立即在移动 Safari 中遇到了空白问题......

尝试使用 CSS 属性min-width并min-height设置为 100%，或以像素为单位的背景图像大小。这应该强制视口（即呈现白色空间的原因）始终遵守背景图像的大小（横向和纵向）。

此外，您还可以尝试应用margin: 0到 HTML 或 BODY 元素。

希望它有效！

PS 你可能在你的 HTML 中也需要这个标签：

<meta name="viewport" content="width=device-width">

但同样，我是新手，所以我不确定它是否有必要。

于 2012-10-31T08:06:05.020 回答