随机背景图片 CSS3答案

【问题标题】：Random background images CSS3随机背景图片 CSS3
【发布时间】：2013-03-05 18:54:12
【问题描述】：

我正在做一个小型网站，但是我的背景有 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   
}

【问题讨论】：

What have you tried?
我已经尝试了下面的 php 示例，就像 2 天前一样，它没有工作。可能是我把它放错地方的原因
如果你的文件扩展名是.html..你不能使用PHP。这可能是问题。
不，我当然把它改成了.php，还是没有
您是使用 WAMP / MAMP 还是直接在 Apache 服务器上运行它？

标签： jquery html css background

【解决方案1】：

你不能只使用 html 和 css 来达到这个目的。您应该在客户端（如 javascript）或服务器端（如 php 脚本）进行操作

这里是 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>

这里是 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)] + ')'});

【讨论】：

好的，我需要把它放在哪里？在 index.html 中？在 DOCTYPE 之前？
您可以使用 jquery 示例并将此代码放在 head 标记处。记得包含你的 jquery.js 文件
好的，但我还想要其他属性 webkit-background-size:cover -moz-background-size:cover -o-background-size:cover background-size:cover
没问题。你把你的 css 和你一样，但也添加了这段代码
好的，我把它放在里面，它只是在 webstie 上显示相同的文本

【解决方案2】：

我会使用 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>

您需要通过随机计数为您的图像命名正确的数字并将它们放置在该图像文件夹中。

【讨论】：

所有图片都必须在根目录下？或者它仍然可以从“图像”文件夹中获取？
它们取自一个名为“bgimages”的文件夹。
好的，它可以作为我的 CSS3 属性使用吗？拉伸到整个窗口？

【解决方案3】：

对于 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>

【讨论】：

我应该把它放在哪里？会是拉伸背景吗？
在这些标签 <script type="text/javascript"> 和 </script> 之间的 head 标签内，如 Matthew Camp 所示。然后你需要参考jQuery库：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>也在head标签内。
检查编辑。只需复制代码并将其插入到 head 标签内。如果没有图片的路径，可以删除带有cmets的部分。
我做了你说的一切，仍然是白色背景。 =(

【解决方案4】：

非常短的选项：（如果您可以在页面中使用 php）。将您的背景网址替换为单引号中的文件名。

background: url('<?php $a = array('darkred.jpg','red.gif','pink.png'); echo $a[array_rand($a)];?>');

【讨论】：

【解决方案5】：

使用纯 CSS 是不可能的。您必须使用javascript来随机设置您网站的背景图片。

【讨论】：

user2136883 没有提及，但他/她标记了 jQuery。我猜这就是为什么会有反对票。

【解决方案6】：

嗯，最后一个答案很短，但是如果你把它们放在一个文件夹里呢？

<?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)]; ?>">

您可以将其保存在一个文件中并将其包含在您的其他页面中以使用该代码。例如：您将其另存为“rand.htm”。只需用此代码替换 <body> 标记即可。

<?php include("rand.htm"); ?>

【讨论】：

如果你打算使用PHP，那么你最好使用scandir来获取文件夹中的图像列表，而不是硬编码它们。