0

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

这是我尝试过的（为了这个例子，我只是在 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>

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

我更喜欢只有 CSS 和 html 的解决方案，但如果可行，我会接受带有 Javascript 的解决方案。请不要在此处提及与其他浏览器有关的问题，我在此问题中专门询问 Mobile Safari。我已经尝试了很多在各种答案中提出的建议，但我还没有找到在 Mobile Safari 中正常工作的解决方案。

所以这里再次以点的形式提出我的要求：

  • 背景图像始终覆盖整个屏幕（不显示空白）
  • 图像始终居中（因此溢出在左右/顶部和底部之间平均分配）
  • 当 iPad 在横向和纵向之间旋转时，图像保持居中
  • 背景图像是固定的（不能移动）
  • 最好是仅使用 HTML 和 CSS 的解决方案（CSS3 也可以）

Anwone 知道如何做到这一点？

更新：

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

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

4

1 回答 1

3

背景图像没有高度和宽度，它们的高度和宽度取决于应用它们的父级的高度和宽度。所以背景图片不可能创建滚动条。

如果您希望背景图像根据屏幕大小调整大小，请使用以下命令：

background-size: cover;
于 2012-06-26T17:10:42.987 回答