css ipad 2 网站内容在背景上滚动已修复答案

【问题标题】：css ipad 2 web site content scrolling on background fixedcss ipad 2 网站内容在背景上滚动已修复
【发布时间】：2013-08-06 15:35:39
【问题描述】：

我需要一个固定的背景来获取浏览器的大小，并且它保持在那个大小，所以内容会上下左右滚动，但背景保持固定在后面。用ipad2可以实现吗？

background: url("....") no-repeat fixed;
background-size: auto;
background-repeat: no-repeat;
background-attachment: fixed;

这样，背景会以正确的大小加载，但在滚动时会滚动到并显示背景颜色。

【问题讨论】：

iPad 类型无关紧要——重要的是 iOS 版本（以及 Safari 版本）。至于问题本身 - 这应该可以正常工作。您是否将背景应用于body？
背景是直接套在html标签上的，所以应该在所有的后面吧？

标签： ios css web background fixed

【解决方案1】：

为此，您可以使用background-size: cover;

我不确定我是否理解问题所在。如果目标是设计 iPad 2 特定背景，您可以考虑 iPad 的分辨率来做类似的事情，即How large is the usable area in iPad Safari

@media screen and (max-width:1024px) {
    body {
        background:url(your-1024x690-image) fixed no-repeat; /*landscape background*/
    }
}

@media screen and (max-width:768px) {
    body {
        background:url(your-768x946-image) fixed no-repeat; /*portrait background*/
    }
}

尚未测试，但应该可以解决问题。

【讨论】：

问题是页面高度非常高，背景被拉伸到那个高度，但我希望它保持在他的真实尺寸。

【解决方案2】：

对于不同的浏览器支持..

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

【讨论】：