0

我正在构建一个带有标题元素的网站，该元素具有固定的全屏背景图像。它完全按照预期工作，除了在移动设备上。我的 iphone/ipad 上的 Safari 和 Chrome 都没有正确显示它——它似乎正在缩放到比标题元素大得多的尺寸。

这是完整的网站：http ://www.loganmerriam.com/

和有关的CSS：

header {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

即使我使用媒体查询来加载更小的背景，它仍然只显示图像的一个很小的缩放部分。

也有人可以指导我在 idevices 上检查 CSS 的好方法吗？

4

2 回答 2

1

不确定它是否会有很大帮助，但http://screenqueri.es/index.php可能会。

于 2013-07-27T19:11:24.233 回答
1

这是因为您的样式正在被覆盖。去除background-size: cover;

header {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  -webkit-background-size: cover; // remove this
  -moz-background-size: cover;  // remove this
  -o-background-size: cover;  // remove this
  background-size: cover;  // remove this
}
于 2013-07-27T19:17:37.097 回答