CSS 浏览器刷新时随机全屏背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18288950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
random fullscreen background image on browser refresh
提问by no0ne
Im using this script that I found online to have a random background image on whenever the browser is refreshed.
我使用我在网上找到的这个脚本在浏览器刷新时有一个随机的背景图像。
CSS
CSS
body{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JS
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', });
});
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.
在大于 1150 像素的屏幕上工作正常，但如果小于 1150 像素，图像就会开始堆积在另一个之上。无论屏幕大小如何，我怎样才能让它伸展开来。我不在乎图像是否在小屏幕上被裁剪，只要它填满了很多。
Thank you
谢谢
回答by Falguni Panchal
回答by no0ne
I found this article Random background images CSS3and this solved the issue
我发现这篇文章 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>
Thank you anyway :)
还是很感谢你 ：）
回答by mhlavacka
Use Falu's answer that is voted as correct, but implement CSS methods used as a #1 solution in this post - Perfect Full Page Background Image
使用被选为正确的 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')";}
It works great for every screen size.
它适用于各种屏幕尺寸。
