Question

我已经在我的网站上放置了所有适合所有屏幕大小，随机刷新的背景图像。效果适用于所有浏览器，但 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">

我已经看过类似的讨论，涉及将修复更改为滚动。还有关于更改背景大小封面变量的讨论。没有解决问题。我甚至想要一种创造性的方法让Chrome在加载后滚动一个像素。

希望有正确的解决方法。

谢谢！

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

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

铬臭虫全屏背景重绘

1 个答案: