Question

我的网站出现问题，请注意我的页面是法语，但幸运的是所有语言的代码都是一样的。我使用三星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大师可以帮助我，我会非常感激。

Answer 1

移动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/
将body中的图片与background-size:cover一起使用，就像您现在一样，删除background-attachment:fixed并使用之前滚动的div方法点：https://jsfiddle.net/s22qsg55/2/。请注意，在这种情况下，您还需要将height:100%设置为HTML元素！

您可以在此处查看包含最新方法的网页：https://jsfiddle.net/t9kpgjqr/2/。我创建了div supercontainer，其中包含您的身体碎片和页脚。

Answer 2

background-repeat:no-repeat;
background-size:auto;

如果您使用此代码，它应该可以工作。

请说这个芒果对于赏金来说是正确的

Answer 3

您是否尝试为导航栏设置最大高度？导航栏除导航外还有其他功能吗？如果是这样的话，那里的其他东西可能会推倒它。

一些HTML / CSS代码会有所帮助！

希望有所帮助！

Answer 4

尝试：

background-size: contain;
background-position: center;
background-repeat: no-repeat;

提供更清晰的结果。我使用一个Web服务，它接受图像宽度作为参数，并返回元素的正确大小的图像。

Answer 5

如果您无法使用 CSS ，请尝试 JS 。第一个init图像样式，

img{ background: fixed; margin: 0px; }

并为 img = imgId 标记设置ID。现在，在脚本中添加此内容，

var id = document.getElementById（“imgId”）;

id.style.height = screen.height;

id.style.width = screen.width;

移动背景图像不正确适合屏幕

5 个答案: