将html保持在与背景图像固定的位置

Question

我遇到的问题是我的背景图片无法在移动设备上呈现（在IOS上测试）。

问题似乎是由于我使用的事实

html{
    position: fixed;
}

在我的项目中，这是必需的，所以我不想删除它。

背景图片在我的台式电脑上渲染得很好，它只是不能在我的iDevices上工作（没有检查过android）。

我做了一个jsfiddle（https://jsfiddle.net/q19srbba/2/）测试，您会注意到背景图像不会在IOS Safari上呈现。

是否有任何可行的方法可以在不删除html{ position: fixed; }的情况下渲染背景图像？

JsFiddle代码：

body{
  background: url('http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1487701021/eiffel-tower-paris-france-EIFFEL0217.jpg?itok=m0MZOYjh');
}

html{
  position: fixed;
}

Answer 1

看起来您的html元素正在崩溃。将宽度/高度100％添加到html元素：

＆＃13;

＆＃13;

body{
  background: url('http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1487701021/eiffel-tower-paris-france-EIFFEL0217.jpg?itok=m0MZOYjh');
}

html{
  position: fixed;
  width: 100%;
  height: 100%;
}

＆＃13;

＆＃13;

＆＃13;