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

我目前正在构建一个网站，在Chrome中显示它时遇到了一些问题。

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

我试图重现这个错误，但它也有同样的问题。这个问题只出现在谷歌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%显示。当你开始滚动时，它会立即完全加载。

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

试试这个：

<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>

这似乎是一个与浏览器有关的问题，而不是您的代码。但一个解决办法是用脚本再次加载后台。

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

不过我不会太担心这个错误。

据我所知，这个问题已经从谷歌解决了。

相关内容

最新更新

热门标签：