Question

我的背景图像是1024 x 1024像素;这些尺寸的原因是我希望图像以横向和纵向模式覆盖屏幕。图像在其中心有一个小徽标，但除此之外它是一个简单的渐变。我希望图像始终居中;换句话说，徽标必须始终位于屏幕的中心， landscape 和 portrait 方向。我还希望图像覆盖整个屏幕，但不希望背景图像创建不必要的滚动条;所以我不希望通过在屏幕上拖动图像来移动图像。

这是我尝试过的（为了这个例子，我只是在HTML中使用样式标记）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Test</title>
<style>
    html,body {
        width:100%;
        height:100%;
    }
    body {
        background-image: url('../img/background.jpg');
        background-position:center;
        background-attachment:fixed;
        background-repeat:no-repeat;
    }
</style>
</head>
<body>
Hello world.        
</body>
</html>

此处代码的问题是图片未居中（在纵向模式下，徽标显示在屏幕右侧，位于底部的 landscape 中屏幕）。似乎背景图像成为页面内容的一部分，因此它会导致滚动条，这意味着可以左右拖动图像。

我更喜欢一个只有CSS和html的解决方案，但是如果它有效，它会接受一个带有Javascript的解决方案。请不要在这里提及与其他浏览器有关的问题，我在此问题中特别询问Mobile Safari。我已经尝试了 LOT 在各种答案中提出的建议，我还没有找到一个在Mobile Safari中正常运行的解决方案。

所以我的要求再次以点的形式出现：

背景图片始终覆盖整个屏幕（不显示空白区域）
图像始终居中（因此溢出均匀分布在左右和上下之间）
图像保持居中
背景图片已修复（无法移动）
最好是只使用HTML和CSS的解决方案（CSS3也没问题）

Anwyone知道如何做到这一点？

更新

这个问题可能出在电脑和椅子之间！ ;）当我在UIWebview中解决了一个问题时，我会发布更新。

确定。已经确认。这里没有什么可看的！ :)这个问题是我自己做的，我提供的HTML实际上正常工作。这是错误的，因为正在加载的HTML是一个错误屏幕，并且在尝试“伪造”错误情况时，我在UIWebview准备好之前导致了实际错误。当我在正确的时间加载HTML时，中心突然工作，滚动条消失。一切都是100％。

Answer 1

背景图片没有高度和宽度，它们的高度和宽度取决于它们应用于它们的父级的高度和宽度。因此，背景图像无法创建滚动条。

如果您希望根据屏幕尺寸调整背景图片的大小，请使用：

background-size: cover;

在移动野生动物园，风景和肖像（iPhone / iPad）中居中背景图像

1 个答案:

在移动野生动物园，风景*和*肖像（iPhone / iPad）中居中背景图像

1 个答案:

在移动野生动物园，风景和肖像（iPhone / iPad）中居中背景图像