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

Question

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

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

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

Answer 1

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

我不确定我是否理解这个问题。如果目标是设计 iPad 2 特定背景，您可以考虑 iPad 的分辨率来做类似的事情，即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*/
    }
} 

还没有测试它，但应该做的伎俩。

Answer 2

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

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