我的网站有问题,请问我的页面是法语,但幸运的是所有语言的代码都是一样的.我正在使用三星Galaxy S5查看页面,顶部有一个大黑盒子.
您可以查看原始页面here.您可以在桌面上看到它们都很好.
现在这就是我的Galaxy S5上发生的事情(抱歉大图像不知道如何在Stack Overflow上调整大小)
在任何来自计算机或iPhone / iPad的浏览器上都可以,但在我的Galaxy S5上,背景图像显示在底部,顶部有一个黑条.
现在,我目前拥有的代码在台式机/ iPad / iPhone上运行正常
body{ margin:0; padding:0; font-size:13px; font-family:"Arial Black",Gadget,sans-serif; color:#FFFFFF; background-image: url('http://www.impotsuzannedelorme.com/images/cloud.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
我不确定我错过了什么,如果一位css大师可以帮助我,我会非常感激.
解决方法
移动Chrome(版本47)尚不支持background-attachment:fixed,并且可能会干扰background-size:cover(正确支持);退房
http://caniuse.com/#feat=background-attachment.
此外,在一些IOS Safari版本中,已知这两种内容(大小覆盖为固定)的组合会导致伪影(参见http://caniuse.com/#search=background-size,已知选项卡).可能它甚至不能在iPad 2中工作,并且肯定它不适用于iPad 1.
这说,你有几个选项,以获得固定的背景和滚动内容:
>使用div作为背景,使用滚动div作为内容,如下所示:https://jsfiddle.net/6r3pobys/2/
>使用背景大小的身体图像:覆盖就像你现在一样,删除背景附件:修复并使用上一点的滚动div方法:https://jsfiddle.net/s22qsg55/2/.请注意,在这种情况下,您需要将高度:100%设置为HTML元素!
您可以在此处查看具有最新方法的网页:https://jsfiddle.net/t9kpgjqr/2/.我创建了div超级容器,其中包含您的身体碎片和页脚.