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

random fullscreen background image on browser refresh

本文关键字：背景 图像 随机 刷新 浏览器      更新时间：2023-09-26

每当刷新浏览器时，我都会使用我在网上找到的这个脚本来打开随机背景图像。

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', });
});

在大于1150px的屏幕上运行良好，但如果小于1150px，图像就会开始一个接一个地堆积。无论屏幕大小如何，我都该如何扩展它。我不在乎图像是否在小屏幕上被裁剪，只要它填满了很多。

感谢

像这个

演示

JS-

$(document).ready(function(){
    var classCycle=['imageCycle1','imageCycle2'];
    var randomNumber = Math.floor(Math.random() * classCycle.length);
    var classToAdd = classCycle[randomNumber];
    $('body').addClass(classToAdd);
});

我找到了这篇文章随机背景图像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>

无论如何都要感谢您：）

使用Falu的答案，该答案被投票认为是正确的，但在这篇文章中实现了用作#1解决方案的CSS方法-完美全页背景图像

.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')";}

它适用于各种屏幕尺寸。

相关文章：