在浏览器刷新的随机全屏背景图象 [英] 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
JS
$(document).ready(function(){
var classCycle=['imageCycle1','imageCycle2'];
var randomNumber = Math.floor(Math.random() * classCycle.length);
var classToAdd = classCycle[randomNumber];
$('body').addClass(classToAdd);
});
这篇关于在浏览器刷新的随机全屏背景图象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文