浏览器刷新的随机全屏背景图像
[英]random fullscreen background image on browser refresh
问题描述
我使用我在网上找到的这个脚本，每当刷新浏览器时都会有一个随机的背景图像。
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像素的屏幕上工作正常，但任何小于此的图像，图像开始堆叠在另一个上面。 无论屏幕大小如何，我怎样才能伸展它。 我不在乎图像是否在小屏幕上被裁剪，只要它填满了这个地段。
谢谢
3 个解决方案
解决方案1
7 已采纳 2013-08-17 12:54:39
像这样
JS
$(document).ready(function(){
var classCycle=['imageCycle1','imageCycle2'];
var randomNumber = Math.floor(Math.random() * classCycle.length);
var classToAdd = classCycle[randomNumber];
$('body').addClass(classToAdd);
});
解决方案2
3 2013-08-17 12:49:34
我发现这篇文章随机背景图像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>
还是要谢谢你 ：）
解决方案3
0 2015-11-11 14:39:44
使用被称为正确的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')";}
它适用于每种屏幕尺寸。
全屏和居中背景图片脚本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.