小编the*_*ger的帖子

我正在使用移动优先开发方法在一个网站(villa-antonia)上工作.也就是说,我首先使用CSS for mobile,然后使用媒体查询添加/覆盖样式以获得更高分辨率.问题是,在iPhone中,背景图像正在加载到所有内容之上,尽管它是在更高分辨率的媒体查询中.

这是CSS文件的一部分(我认为涉及的部分):

body {
  background: #c70000;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Minimum width of 960 pixels. */
@media only screen and (min-width: 960px) {

  body {
    background: transparent url('images/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }
}

在我对CSS的理解中,iPhone甚至不应该加载bg.jpg图像,因为它在媒体查询中.但这是我向下滚动时得到的结果:

你看到的车是bg.jpg的一部分,我向下滚动的越多,它在屏幕上显示的bg.jpg越多.

我真的不知道为什么要加载图片...任何想法？

PS:iPad和iPhone 4(以及可以在iOS模拟器上测试的所有其他设备)也是如此.