随机背景图片 CSS3

Question

随机背景图片 CSS3

10

我正在制作一个小型网站，但是我有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   
}

- user2136883

你都尝试了些什么？(http://whathaveyoutried.com) - Chad

我尝试了下面的PHP示例，大约两天前，但它没有起作用。可能是因为我把它放错了地方。 - user2136883

如果您的文件扩展名是“.html”，则无法使用PHP。这可能是问题所在。 - Corfitz.

我已经将它更改为.php，但仍然不行。 - user2136883

你是在使用WAMP/MAMP还是直接在Apache服务器上运行它？ - Corfitz.

6个回答

9

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

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

- Matthew Camp

所有的图片必须在根目录下吗？还是可以从“images”文件夹中获取？ - user2136883

它们来自名为“bgimages”的文件夹。 - Matthew Camp

好的，它会像我的CSS3属性一样工作吗？能够延伸到整个窗口吗？ - user2136883

8

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

- Corfitz.

我应该把它放在哪里？它会是可拉伸的背景吗？ - user2136883

在 head 标签内，按照 Matthew Camp 的方法，在 <script type="text/javascript"> 和 </script> 标签之间添加相关代码。接着，您需要引用 jQuery 库： <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 也要放在 head 标签内。 - Corfitz.

只需将代码复制并插入到头标签中即可。如果没有图像路径，则可以删除带有注释的部分。 - Corfitz.

我按照你说的做了，但仍然得到了白色背景。=( - user2136883

3

非常简单的方法：（如果您可以在页面中使用php）。将您的背景图片的url替换为单引号中的文件名。

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

- ssaltman

0

这是使用纯 CSS 不可能实现的。你必须使用 JavaScript 来随机设置你网站的背景图像。

- VaioWay

user2136883没有提到，但他/她标记了jQuery。我猜这就是为什么会有负评的原因。 - MiniRagnarok

0

好的，上一个答案很简短，但如果您把它们放在一个文件夹中呢？

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

- AhmedJKT48

1

如果您打算使用PHP，则最好使用scandir获取文件夹中的图像列表，而不是硬编码它们。 - Zonker.in.Geneva

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MIIB · Accepted Answer

您不能仅使用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)] + ')'});