html – 防止固定位置的背景图像：覆盖从移动浏览器调整大小在地址栏隐藏

概述对不起，这个没有例子，但是我觉得很容易理解。 我在我的网站上有一个固定的背景，目前是这样实现的： #background { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #28305e; background-image: url(../im 对不起，这个没有例子，但是我觉得很容易理解。

我在我的网站上有一个固定的背景，目前是这样实现的：

#background {    position: fixed;    top: 0;    bottom: 0;    left: 0;    right: 0;    background-color: #28305e;    background-image: url(../images/background.jpg);    background-size: cover;    -moz-background-size: cover;    background-position: center center;    z-index: -10;}<div ID="background"></div>

在所有浏览器中，除了移动浏览器在向下滚动时隐藏地址栏之外，这是非常好的。隐藏地址栏时，视口会垂直扩展，背景图像会自动调整大小。在这个特定的网站上，用户通常会向上和向下滚动，效果会分散注意力。

解决这个问题的任何想法或策略，或以不同的方式实施背景？

我可以将整个东西包装在一个固定的容器中，并将overflow-y设置为scroll，这样可以防止地址栏被隐藏，但我不想这样做(Google Glass不能滚动这些容器，哈哈…想在那里演示)。

我一直在想一些提供background-image：覆盖功能和某种缓冲区的东西，这样它会比视口大得多，并且不会重新渲染，除非视口扩展到该缓冲区之外，但是我“不知道该怎么实现。

编辑：我实际上已经在下面的答案中实现了这个过程并详细说明了这个过程。然而，即使使用这种缓冲区设置(将背景图像的高度延伸到视口高度的60像素)，在地址栏隐藏时，仍然会显示一个空白的背景颜色段，显示出来，一旦您停止滚动，它渲染其余的背景图像。

仍然寻找一种方法来保持本地地址栏的隐藏功能(现在已经扩展到iOS 8中的iPad上的iOS Safari)，并且还具有始终完全渲染的全屏幕背景图像，即使视口在隐藏地址时更改高度酒吧。开始怀疑我是否应该为所有浏览器提交错误报告？

解决方法 对于移动Safari，您必须无意间将固定的背景附加到HTML元素上。

HTML {    background: url(../img/bg.jpg) no-repeat center center fixed;    background-size: cover;    height: 100%;    overflow: hIDden;}

然后设置滚动到身体。

body {    height: 100%;    overflow: scroll;}

您仍然需要IE 8的背景div，因为它不支持background-size属性，因此移动浏览器应该隐藏它。最干净的方法是利用IE 8无法读取媒体查询

@media only screen { #background { display: none; }}

总结

以上是内存溢出为你收集整理的html – 防止固定位置的背景图像：覆盖从移动浏览器调整大小在地址栏隐藏全部内容，希望文章能够帮你解决html – 防止固定位置的背景图像：覆盖从移动浏览器调整大小在地址栏隐藏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。