在浏览器刷新的随机全屏背景图象 [英] random fullscreen background image on browser refresh

问题描述

我使用这个脚本，我发现在网上有一个随机的背景图片，每当刷新浏览器。

Im using this script that I found online to have a random background image on whenever the browser is refreshed.

CSS

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

JS

$(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像素的屏幕上可以正常工作，但小于此值，图像开始堆叠的另一个。我怎么能让这个伸展，无论什么屏幕尺寸。我不关心，如果图像被裁剪在小屏幕上，只要它填充了很多。

Works fine on screens larger than 1150px but anything less than that, the images starts piling up one on top of another. How can I get this to stretch out no matter what screen size. I dont care if the image gets cropped on small screens as long as it fills the lot.

谢谢

推荐答案

像这样

DEMO

DEMO

JS

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

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

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

});

这篇关于在浏览器刷新的随机全屏背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！