Question

我使用1900X1200图像作为我的页面背景：

                  body{
                  background: url(Layout/Ball7.png);
                  background-position: center center;
                  background-repeat:no-repeat;
                 -webkit-background-size: cover;
                 -moz-background-size: cover;
                 -o-background-size: cover;
                  background-size: cover;}

它涵盖了桌面版和iOs Safari版的整个屏幕。事情是，在Android原生浏览器上（我试过三个不同的设备）它在屏幕的顶部和底部留下了一个空白区域（从顶部和底部约15％的空白）。如果我删除background-position: center center;，屏幕顶部也将成为背景的一部分，但页面底部仍然会出现空白（apprx.15％）。我也尝试使用此代码作为解决方案：

height:100%   width: 100%;
height: 100%;  
position: fixed;
top: 0;
left: 0;
z-index: 0;

但没有运气，屏幕的底部没有覆盖。我在这里错过了什么吗？我尝试了很多选择，但没有一个符合我的需要。

可能的解决方案：我尝试使用非常大的图像（1900x2500），它确实覆盖整个屏幕，但这个解决方案是最后的选择，我想坚持我的1900x1200图像。

感谢您对此事的任何启发。

Answer 1

body {
    background: url(Layout/Ball7.png) no-repeat top left fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    margin:0;
    padding:0;
}

Android浏览器上的背景图片封面

1 个答案: