chrome bug 全屏背景重绘答案

【问题标题】：chrome bug fullscreen background redrawchrome bug 全屏背景重绘
【发布时间】：2014-12-19 09:16:42
【问题描述】：

我在我的网站上放置了一个适合所有屏幕尺寸、随机刷新的背景图片。该效果在除 Chrome 之外的所有浏览器上都能正常工作。当您向下滚动一个较长的页面并通过链接离开它然后返回该页面时，或者如果您停留在该页面上并且只是刷新，就会发生恶化。 背景只会在您滚动时出现。如果您位于页面顶部，则可以正常工作。

我网站的示例长页面： http://madcoversite.com/ugoi-master.html

向下滚动任意长度，然后刷新。背景将半加载或根本不加载。

我的随机图片的 Javascript：

function changeImg(imgNumber)   {
var myImages = ["back100-1-blur.jpg","back150-1-blur.jpg","back150-2-blur.jpg","back050-2-blur.jpg","back050-3-blur.jpg","back050-4-blur.jpg","back050-5-blur.jpg","back050-6-blur.jpg","back050-7-blur.jpg","back200-1-blur.jpg","back200-2-blur.jpg","back300-1-blur.jpg","back100-2-blur.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber = Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;

我的 CSS 用于将图像扩展到任何屏幕尺寸：

body { 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

结束头下方的HTML：

<BODY TEXT=000000 LINK=3232CD VLINK=6B238E topmargin=0 onselectstart="return false">

我看到过类似的讨论，涉及将 fixed 更改为 scroll。还有关于更改背景大小 cover 变量的讨论。不解决问题。我什至在寻找一种创造性的方法来让 Chrome 在加载后滚动一个像素。

希望有正确的解决方法。

谢谢！

【问题讨论】：

标签： javascript html css google-chrome

【解决方案1】：

您将图像加载到 body 标记上，而不是使用 CSS。试试把这段代码：

background-image: url(http://madcoversite.com/back050-5-blur.jpg);">

进入这个：

body {
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

最终结果：

body {
    background-image: url(http://madcoversite.com/back050-5-blur.jpg);
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

你可能需要继续玩

background-image:

直到你让它以你想要的方式显示。

【讨论】：

谢谢奥斯卡。你可能正在做某事。也许 Chrome 需要指定该背景图像？我想知道如何合并来自 Javascript 的随机图像。
自从您从 javascript 生成这些图像以来，我认为您能做的最好的事情就是将 javascript 的最终结果放入一个变量中，然后在您的 css 文件中使用该变量。我知道这是在使用 LESS 或 SASS 时完成的。其中任何一个都可以让您在 CSS 中使用变量。
这是一个在 CSS 中使用变量的好例子css-tricks.com/css-variables-with-php
我决定从混音中去掉随机性，这样做可以消除不需要的 Chrome 效果。我会不时地手动交换背景图像。是的，我在这里承认失败，但是当 Chrome 认为值得他们花时间加入其他浏览器时，我会重新建立上述内容。可能要等一会儿……
所以现在的新 CSS：body { background: url("back050-2-blur.jpg") no-repeat center center fixed; -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面； }