jQuery 随机背景图片 CSS3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15231812/
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 background images CSS3
提问by user2136883
I am doing small website, however I have like 5-6 images for my background, and I want to make it random every time I refresh the page. This is what I got in style.css :
我在做小网站，但是我的背景有 5-6 张图片，我想每次刷新页面时都随机设置。这是我在 style.css 中得到的：
html {
background: url(image/l2.jpg) no-repeat center center fixed
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
}
回答by MIIB
You cant use only html & css for this purpose. You should do it client side(like with javascript) or server side(like a php script)
为此，您不能仅使用 html 和 css。您应该在客户端（如 javascript）或服务器端（如 php 脚本）
Here's php example:
这是php示例：
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
Here's jquery example:
这是 jquery 示例：
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
回答by Matthew Camp
I would use JS. Take a look at this example:
我会使用JS。看看这个例子：
<html>
<head>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body>
// Page Design
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
You would need to name your images the proper numbers through the random count and place them in that images folder.
您需要通过随机计数为您的图像命名正确的编号，并将它们放在该图像文件夹中。
回答by Dimser
For jQuery:
对于 jQuery：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var bgArray = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var bg = bgArray[Math.floor(Math.random() * bgArray.length)];
$('body').css('background', bg);
// If you have defined a path for the images
var path = 'images/bg/';
// then you can put it right before the variable 'bg'
$('body').css('background', path+bg);
});
</script>
回答by ssaltman
Really short option: (if you can use php in the page). Substitute the urls of your backgrounds for the filenames that are in single quotes.
非常短的选项：（如果您可以在页面中使用 php）。用您的背景网址替换单引号中的文件名。
background: url('<?php $a = array('darkred.jpg','red.gif','pink.png'); echo $a[array_rand($a)];?>');
回答by AhmedJKT48
Well, the last answer is very short, but how if you put them in one folder?
嗯，最后一个答案很短，但是如果你把它们放在一个文件夹中呢？
<?php
$pt = 'BGs/'; //folder where you put your BGs
$bg = array($pt.'bg_ants.png', $pt.'bg_boobs.png', $pt.'bg_circles.png' ); // array of filenames
?>
<Body background="<?php echo $bg[array_rand($bg)]; ?>">
You can save it in one file and include it to use the code at your other pages.
For example: you save it as "rand.htm". Just replace the <body>tag with this code.
您可以将其保存在一个文件中并将其包含在内以在其他页面上使用该代码。例如：您将其另存为“rand.htm”。只需<body>用此代码替换标签即可。
<?php include("rand.htm"); ?>
回答by evsar3
This is not possible using pure CSS. You must to use javascript to random and set the background image of your website.
使用纯 CSS 无法做到这一点。您必须使用 javascript 来随机设置您网站的背景图片。
