Question

我知道这里有这样的问题，但很多现有的问题已经过时了。我需要的是以下内容：一个网页，最好只有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。

Answer 1

我想我可以提供帮助。我也是移动设计的新手，但在移动Safari中立即遇到了空白问题......

尝试使用100％的CSS属性min-width和min-height，或以像素为单位的背景图片大小。这应该强制视口（这是呈现白色空间的内容）始终如一地（横向和纵向）遵循背景图像的大小。

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

希望它有效！

P.S。您可能还需要在HTML中使用此标记：

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

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

Mobile Safari（iOS 5）中的固定和居中背景图像，风景和肖像

1 个答案: