Question

我目前正在建立一个网站，但在Chrome中显示时我遇到了一些麻烦。

当网站完全加载时，您滚动到某个点并点击刷新按钮。背景图像上方会出现白色方块，看起来背景中的图片没有完全加载。

我尝试重现此错误，它也有同样的问题。这个问题只出现在Google Chrome上

这是我转载网站的源代码：

<html>
    <head>
        <style>
            body {
                background-image: url(http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-royalty-free-photos-images-for-commecial-use-awesome/wallpaper-royalty-free-photo-image-awesome-277.jpg) !important ;
                background-repeat:no-repeat; background-attachment:fixed;
            }
        </style>
    </head>
    <body>

-- Just pasted some long text from wikipedia here --

    </body>
</html>

我在搜索问题时也在网站上发现了同样的问题： http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

当您滚动到底部并点击刷新时，图像不会显示100％。当你开始滚动时，它会立即完全加载。

编辑：缺少一个重要的事实：似乎只有在网站上有滚动条时才会出现此错误，并且您不会在其顶部刷新。

Answer 1

试试这个：

<style>
        body {
            background: url(http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-royalty-free-photos-images-for-commecial-use-awesome/wallpaper-royalty-free-photo-image-awesome-277.jpg) center no-repeat ;
            background-size: cover;
            -webkit-background-size: cover; //safari chrome
            -moz-background-size: cover; // firefox
            -o-background-size: cover;
        }
</style>

Answer 2

这似乎是与浏览器有关的问题而不是您的代码。但是解决方法是使用脚本再次加载背景。

<script type="text/javascript">
function loadBg() {
        document.body.style.backgroundImage="url('backgroundImage.jpg')";
    }
</script>

<body onload="loadBg()">

但是，我不会太担心这个错误。

Answer 3

据我所知，此问题已经从谷歌修复。

Chrome背景图像在刷新时留下白色空间

3 个答案: