浏览器刷新时随机全屏背景图像答案

【问题标题】：random fullscreen background image on browser refresh浏览器刷新时随机全屏背景图像
【发布时间】：2013-08-19 18:47:33
【问题描述】：

我正在使用我在网上找到的这个脚本来在浏览器刷新时随机显示背景图像。

CSS

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

$(document).ready(function(){
var images=['images/001.jpg',
            'images/002.jpg',
            'images/003.jpg',
            'images/004.jpg',
            'images/005.jpg',];

var randomNumber = Math.floor(Math.random() * images.length);
var bgImg = 'url(' + images[randomNumber] + ')';

$('body').css({'background':bgImg, 'background-size':'cover', });

});

在大于 1150 像素的屏幕上工作正常，但小于 1150 像素时，图像会开始堆积在另一个之上。无论屏幕尺寸如何，我怎样才能让它伸展。我不在乎图像是否在小屏幕上被裁剪，只要它填满了很多。

谢谢

【问题讨论】：

标签： javascript css random fullscreen

【解决方案1】：

我找到了这篇文章 Random background images CSS3 这解决了问题

<html>
<head>
<script type="text/javascript"> 
var totalCount = 5;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";// Background repeat
}
</script>
</head>
<body> 

// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>

还是谢谢你:)

【讨论】：

即使这样我也遇到了问题，因为“html doctype”开始弄乱了 javascript。随意评论..

【解决方案2】：

像这样

DEMO

$(document).ready(function(){
    var classCycle=['imageCycle1','imageCycle2'];

    var randomNumber = Math.floor(Math.random() * classCycle.length);
    var classToAdd = classCycle[randomNumber];

    $('body').addClass(classToAdd);

});

【讨论】：

这是我遇到问题的示例

【解决方案3】：

使用被选为正确的 Falu 的答案，但实现在这篇文章中用作 #1 解决方案的 CSS 方法 - Perfect Full Page Background Image

.imageCycle1{
background:url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 filter:    progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";}

它适用于各种屏幕尺寸。

【讨论】：