随机背景图片 | CSS-Tricks

Antti

# 2009年10月25日

您可能可以使用更短的代码

<!–
body{
background: url(images/bg-0.jpg) no-repeat;
}
–>

..如果图像少于10张。

Andrew Champ

评论永久链接# 2009年10月26日

？？？我不确定您在这里的方法。您将在哪里实现php？
Antti

评论永久链接# 2009年10月26日

哦，我在提交该消息时似乎出现了一些错误。我的意思是

background: url(images/bg-0

.jpg) no-repeat;

当然，这仅在图像<= 10张时有效。

让我们看看，如果这次有效……
Chris Coyier

评论永久链接# 2009年10月27日

是的，我假设那里有一些内联PHP正在运行。PHP标签从WordPress评论中被剥离，因此，如果您需要发布它们，请在此处添加空格< ?
Antti

评论永久链接# 2009年10月27日

好的，

所以再来一次（您可能已经猜到我要去哪里了）

background: url(images/bg-0.jpg) no-repeat;

就像那样！
rotub

评论永久链接# 2011年1月20日

哈哈 :P
Lucio Oliveira Junior

评论永久链接# 2019年11月5日

它也可以用于视频吗？

Michael

# 2009年10月25日

很棒的代码片段！我该如何从文件夹中提取图像（并在用户每次从该目录上传或删除照片时添加或减少列表中的图像）？

mz

Dylan

评论永久链接# 2010年4月9日

您是否已经了解如何从文件夹中提取图像？
Der

评论永久链接# 2012年2月4日

您可以使用glob函数，例如

您有一个名为“image”的文件夹，这就是它的作用方式

Der

# 2012年2月7日

抱歉忘记了代码



function randImage($path)
{
	if (is_dir($path)) 
	{
		$folder = glob($path); // will grab every files in the current directory
		$arrayImage = array(); // create an empty array
		
		// read throught all files
		foreach ($folder as $img) 
		{
			// check file mime type like (jpeg,jpg,gif,png), you can limit or allow certain file type	
			if (preg_match('/[.](jpeg|jpg|gif|png)$/i', basename($img))) { $arrayImage[] = $img; }
		}
		
		return($arrayImage); // return every images back as an array
	}
	else
	{
		return('Undefine folder.');
	}
}

$bkgd = randImage('image/');
$i = rand(0, count($bkgd)-1); // while generate a random array
$myRandBkgd = "$bkgd[$i]"; // set variable equal to which random filename was chosen

mr92

评论永久链接# 2012年6月28日

哇，删除了我的PHP代码……

我在我的doctype上方复制了您的PHP代码，并将randImage(‘image/’);更改为randImage(‘http://testserver.de/image/’);。

在CSS部分，我也做了一些更改

background: url(http://testserver.de/image/ ?php echo $myRandBkgd; ?>) no-repeat center center fixed;

（当然，在?php之前有开头的箭头。

我的错误在哪里？！

Bruno Correia

# 2009年10月28日

我为客户编写了这个。效果很好。它返回随机图像的路径。此外，它不会允许连续两次加载相同的图像。

Bruno Correia

# 2009年10月28日

我想我不允许在我的上面评论中发布超链接。- 对此表示歉意。

teddy

评论永久链接# 2015年12月5日

您是否有可能与我分享，我需要在我的正在开发的wp网站上使用类似的功能

ryan

# 2009年11月2日

由于某种原因，这对我来说不起作用……

Kristofer

# 2009年11月14日

嘿，感谢您提供此php代码/css，它现在可以正常工作了，只需稍微修改一下css，它就是我需要的代码！:) 干杯

Ant

# 2010年5月16日

更好的是，给body随机类，并在主css文件中定义背景。

Rai

# 2011年1月6日

您好，感谢您的分享……

我想问一下这个例子是将随机图片应用到body上吗？对吧？
我可以将其应用于#div吗？我应该怎么做？

祝福。
Rai。

barun

# 2011年3月24日

您好，我在这里有点困惑..您能帮我一下吗..我不知道在哪里放置php文件..请帮忙...谢谢

Gutem

评论永久链接# 2011年7月12日

如果您使用header.php，则必须将其放在header.php中。
您将第一个代码块放在DOCTYPE之上。
您将第二个代码块放在标签之前

neel

# 2011年7月30日

哈哈：我认为您的脚本无法正常工作。这些是从网上复制粘贴的，您从未使用过这些

Navee

评论永久链接# 2012年3月7日

不，我的朋友……$you = $followed_instructions;

IF ($followed_instructions === true) {
$result = “按编写和预期的方式工作”;
$result .= “…并且仅通过阅读代码而不执行它就可以工作”;
IF ($you === “are PHP aware”) { >>>NICE_SMILEY
[h1]哇，给我那些脸颊……看起来有人要贴纸了！！！[/h1]
NICE_SMILEY;
}
}else{
$result = “{$you} 将假设它是复制/粘贴并且无法工作”;
$result .= “并且嵌套的IF可能会让您循环……而WHILE可能会对您造成更大的伤害……WITH ($your_assumption) {$return false;} #JS”;
}

$message = “无论如何…”;

echo $message . ” ” . $result . “!”; // 或者如果echo对$you来说太复制/粘贴了，可以使用print…请再次尝试此代码段，直到您捕获浏览器中出现的随机背景图像。#TeamHelloWorld

David Zupec

# 2012年3月2日

您好，我尝试过实现它，但由于某种原因它不起作用。我在我的index.php页面中将php添加到我的doctype上方，并在css中的background标签内添加了php echo命令。我只是看到了一个空白屏幕？任何帮助将不胜感激:)

Navee

评论永久链接# 2012年3月7日

当您的屏幕为空白时：右键单击并选择“查看背景图像”或根据您的浏览器查看背景图像的等效项！您可能会收到一条错误消息，指出您尝试预览的图像不可用。

即错误的文件路径、拼写错误等>>>在php文档（在$bg数组中）中仔细检查图像文件名与文件夹中图像的文件名是否一致……并确保您的CSS背景url图像路径设置正确。有时人们有“image”目录（单数），而其他人则有“images”目录（复数）或进一步嵌套的图像文件夹。

您的图像位于何处并不重要，只要您指向确切的目录并在数组中具有正确拼写的文件名，它就应该可以工作。

此外，这似乎很明显，但请确保您正在使用能够解析/执行php代码的Web服务器……除此之外，通常是文件路径或拼写错误。但是我相信您已经正确地完成了以上所有操作……对吧？然后确保您的扩展名以.php而不是.htm或.html结尾，并观察它的工作效果！！！
Jornes

评论永久链接# 2015年12月4日

请确保css部分的php代码位于您的html文件中，而不是单独位于您的css文件中。

<!doctype html> <html> <head> <title>您的网页标题</title> <style> body{background: url(yourimagepath/<?php echo $selectedBg; ?>) no-repeat; /**它以这种方式工作**/ } </style> <style src="yourcsspath/yourcss.css"></style> <---php代码在此css文件中不起作用。 </head> <body> 您的内容在此处。 </body> </html>

希望对您有所帮助。

Feijao

# 2012年3月28日

你好！
帖子中的代码对我有用；)

非常感谢，
AF

Aase

# 2012年4月29日

它对我有用。谢谢。我使用了一个css文件，它完美地工作了。我在表格中使用了代码。

雷鸣

# 2012年6月5日

嗨~ 我只是想知道这是否适用于Tumblr主题？^^” 我今天一直在学习html，试图至少修改默认的Tumblr主题并使用自定义html等，我记得在另一个网站上看到横幅在变化，并认为它很酷，所以我想自己做并找到了这个页面，但由于某种原因它不起作用…

克里斯托弗·安德顿

评论永久链接# 2013年10月9日

由于Tumblr是一个托管服务，您不能使用PHP。但是，如果您搜索，有一些JavaScript选项可以在Tumblr上使用。

atotalpirate

# 2012年6月6日

这太棒了！效果很好！几乎…有人能告诉我为什么这在所有地方都完美运行，但在我的博客文章页面上却不行吗？在博客上运行良好，但如果您点击文章，背景是空白的。任何帮助将不胜感激！

Markforces

# 2012年6月29日

可能需要有人向我详细说明额外的php代码。我在doctype之前使用了第一个php代码，并在head标签中使用了css样式代码。那么额外的php代码放在哪里呢？我自认为是php新手，所以请温柔点。它可以与其他php代码一起放在我的html文档中，还是作为一个单独的文件，如果是，我需要做什么？谢谢

费利佩

# 2012年7月5日

有没有办法让背景颜色随着图像一起变化？

我希望页面可以滚动。

丹尼

评论永久链接# 2014年3月5日

您可以将图像名称更改为id/class名称并以此方式设置它！？然后在您的css文件中定义颜色等。

< ?php
$bg = array(‘red’, ‘green’, ‘blue’); // 类名数组

$i = rand(0, count($bg)-1); // 生成随机数数组大小

$selectedBg = “$bg[$i]”; // 将变量设置为选择的随机文件名
? >

< div class = ” < ?php echo $selectedBg; ? >” >

然后在您的css文件中

.red{设置样式}

.green {设置样式}

.blue {设置样式}

Jornes

# 2012年8月30日

嘿！太棒了，伙计。代码对我有用，你的说明简单易懂！！继续努力！我正在为自己的企业创建一个新的网站。使用您的代码，我可以轻松地向我的客户展示更多漂亮的图片。非常感谢！=)

罗伯特

# 2012年10月3日

简洁明了的代码，很好的应用。非常感谢！=)

安德鲁

# 2012年10月30日

<

p>我知道我参加这个活动晚了，但在尝试了几种复杂的方法，包括http://sonspring.com/journal/easy-random-css-backgrounds之后，我完全震惊地看到这里它实际上可以多么“简单”。

谢谢克里斯。

杰克琳

# 2012年11月12日

有没有办法在一个单页滚动网站的一个部分上做到这一点？我希望网站的主页能够轮换（但滚动上的其他页面除外），并且似乎找不到在CSS而不是HTML“主体”中起作用的代码。现在我在CSS的div中输入背景图像。

橙色页面

# 2012年11月20日

嘿！你的代码不仅可以随机更改背景，而且还可以用于我的js代码。您可以查看我的网站“热门搜索（搜索框下方）”，那里的关键词每次重新加载页面时都会随机变化。PHP代码太棒了！稍后会学习更多并与大家分享。干杯！

谢姆

# 2012年11月24日

您不必将css放在HTML中
只需将下面的php放在样式表顶部并将文件扩展名更改为php即可。此方法允许您在其余样式中使用变量。

< ?php

header(“Content-type: text/css; charset: UTF-8”);

$bg = array(‘bg-01.jpg’, ‘bg-02.jpg’, ‘bg-03.jpg’, ‘etc.jpg’ );

? >

html {
background: url(images/< ?php echo $bg[array_rand($bg)]; ? >)
}

//其余的css

尼古拉

# 2013年1月31日

原始代码仅在FF中正确重新加载图片；Chrome和IE9需要ctrl+F5，这对于标准用户来说并不常见。我是唯一遇到此问题的人吗？谢谢。

joppz

# 2013年2月3日

你好。
在尝试使用它之前，我想知道
我是否可以在某个地方预加载图像，以便网站不必一直加载大图片？
它可以放在CSS文件中，并将css重命名为.php（类似于此站点上的另一个示例）吗？

麦克斯·肖米亚

评论永久链接# 2013年2月6日

首先要说我根本不喜欢随机图像的想法。大多数时候网站这样做，最终结果几乎和著名的跑马灯文字一样令人作呕，呸。

不过，以上读者的一些评论：使用“glob”或任何“readdir”都会使此代码段为Web服务器增加额外的工作负载——每次页面加载时都会扫描目录——这可能代价很高，尤其是在目录很大的情况下。

尽管将这种代码放在.css中会使其无法缓存，即会稍微减慢网站页面对网站用户的下载速度。另一方面，根据您的Web服务器设置，您可能会发现.css中的代码根本不起作用，因为您的浏览器将在第一次加载时缓存它并在所有后续请求中使用缓存的版本，而根本没有任何随机化。

长话短说：原始作者提供的代码段的逻辑是正确的，不要乱改。

德里

# 2013年2月3日

对于那些有很多问题的人，这更容易实现

////// 使用示例 //////

1.

    .myBackground { background:url(<?php echo randImgs('image/bkgd'); ?>) no-repeat left top; }

</style>

<body class="myBackground"> ... </body>

— 或 —

2.
<body style="background:url() no-repeat left top”> …

德里

# 2013年2月4日

对以上内容表示歉意

<?php

    // This can be any where, but MUST be before you echo statement
    function randImgs($path=NULL, $type='jpg|jpeg|png|gif') 
    {
        if (!is_null($path)) {
            if (!is_dir($path)) {
                $images = glob($path.'/*.*'); $array = array();         
                foreach ($images as $image) {
                    if (preg_match('/[.]('.$type.')$/', basename($img))) { $array[] = $img; }               
                } shuffle($array); return(current($array));
            } else { return('Directory doesn\'t exist.'); }
        } else {  return('Data not found.'); }
    }

?>

////// EXAMPLE USAGE //////

1.
    <style type="text/css">

        .myBackground { background:url(<?php echo randImgs('image/bkgd'); ?>) no-repeat left top; }
        
    </style>

    <body class="myBackground"> ... </body>

 -- OR --
 
2.
    <body style="background:url(<?php echo randImgs('image/bkgd'); ?>) no-repeat left top"> ... </body>

纳宾·巴贾拉查亚

# 2013年3月19日

这段代码帮了我很大的忙。我在Joomla中使用了它。
非常感谢。我经常访问并下载您的教程。

杰克·珀西瓦尔

# 2013年6月5日

好的，所以我想做的是在一个论坛插件（Mingle Forum）上放置一个随机背景。我也在使用WordPress。这可行吗？我道歉，我个人只是刚开始接触编码。

Der

评论永久链接# 2013年6月5日

是的，脚本非常通用，只要您按照上面的说明操作，就应该没问题
……顺便说一句，将“$image”更改为“$img”，在“as”之后，是我的错误

让

# 2013年6月17日

大家好！
感谢这个教程！
您知道如何为这个背景图像添加标题吗？所有图像使用一个标题会很棒！☼

Rozgar Opps

# 2013年7月8日

有没有人能够找出并告诉我上面哪个代码段这个压缩（注册）页面可能正在使用，以便每次刷新或重新访问页面时都显示随机的背景图像？我发现可能没有JavaScript，并且图像超过10张，而且我不是技术人员，只懂一些HTML。非常感谢您的帮助。压缩页面的地址如下：http://promoplatinum.com/sq1/swp.php（不是我的）。

au2001

# 2013年11月1日

这个对我来说完美地工作了：<br/>
<style type="text/css"><br/>
html {<br/>
background-repeat: no-repeat;<br/>
background-attachment: fixed;<br/>
background-size: 100% 100%;<br/>
background-image: url(<?php echo "images/backgrounds/bg-".rand(0, 10).".png"; ?>);<br/>
/* 将10替换为您在images/backround/中拥有的背景数量，并命名为bg-x.png */<br/>
}<br/>
</style>

Zandstralen

评论永久链接# 2013年11月8日

au2001，

这是否无需在其他地方添加php代码即可工作？
史蒂夫·索尔特曼

评论永久链接# 2013年12月3日

哎呀...刚在下面发布了相同的方法...完全一样...

au2001

# 2013年11月1日

糟糕，没有所有的“<br/>”...

史蒂夫·索尔特曼

# 2013年12月3日

这是一个更简单的方法

确保您的文件名末尾有整数。

在这种情况下，我有两个
cloud3.png
cloud4.png

.clouds {
background:transparent url(‘/images/lm/clouds<?php echo rand(3,4)?>.png’) repeat top center;
}

如果你想要一个1到100之间的随机数，只需将(3,4)更改为(1,100)，并且你的文件应该命名为cloud1.png、cloud2.png、cloud3.png等。按顺序编号你的图片，它就会起作用。

就是这样。每次页面加载时都会随机显示背景。

Hugo

评论永久链接# 2017年10月15日

这对我来说很有效，谢谢。

史蒂夫·索尔特曼

# 2013年12月3日

这里有一个适用于任何图片的方法（不需要符合任何文件名结构）

background: url(<?php $a = array(‘anyfile.jpg’,’anyotherfile.gif’, ‘somefile.png’); echo $a[array_rand($a)];?>);

Forrest

# 2014年1月6日

Chris一开始输入的示例工作正常。只需确保你获取了图片文件夹的正确路径。对我来说，它是/images/bg-01.jpg。

谢谢Chris

klafkid

# 2014年1月14日

嘿，感谢au2001，你的代码运行得很好。

我尝试在wordpress的循环中使用这段代码，在浏览器中查看我的网站的html代码时，我发现每个帖子的背景都不一样。

但整个页面仍然只显示一张图片。（我想为每个帖子设置一个随机的不同背景。）有什么想法/帮助吗？

摩洛哥就业

# 2014年1月17日

嗨，这段代码对我来说不起作用，有人能给我完整的代码吗？**求求你**

Immunos

# 2014年4月26日

嗨，Chris，
感谢你提供这个很棒的脚本。它运行良好。
如何更改代码以确保每次刷新页面时都使用不同的背景图片？
使用上面列出的脚本，刷新后，仍然是相同的背景图片，我假设这是随机选择的。可以修改代码，使其在每次刷新后都显示不同的图片吗？
非常感谢，
I

kevin

# 2014年10月14日

您好。我看到这是一篇旧帖子，但我正在使用WP-Super Cache进行页面优化，它阻止了随机图片代码的工作。每次刷新页面或点击到另一个页面时，我都会得到相同的图片。当我关闭WP-Super Cache时，它工作正常。有没有办法让随机图片和缓存插件共存？我对缓存的工作原理知之甚少，但我感谢任何想法。谢谢，kevin

Nedyah

# 2014年12月27日

嗯，除了随机之外，是否可以根据日期来选择，请帮忙。

Shubho

# 2015年6月14日

你好，
它运行良好，在客户网站上实施没有任何问题。

谢谢！

Ayrton

# 2015年7月19日

有人能告诉我如何更改默认情况下图片的路径吗？

我想将其更改到另一个文件夹，而不是images/

谢谢！:3

rdllngr

# 2015年8月27日

谢谢，steve saltman。完美地工作了！而且它非常简单……

file3.png
file4.png

.class {
background: url(‘/images/file.png’);
}

rdllngr

评论永久链接# 2015年8月27日

谢谢，steve saltman。完美地工作了！而且它非常简单……

http://codepen.io/anon/pen/GpKvye

JuiceTown

# 2016年8月6日

我来这里是为了寻找一个css技巧。php解决方案很简单。我需要css

Ron

# 2016年10月14日

谁能帮我一下——我需要一个随机的前景和背景来匹配。前景和背景在主题中匹配？我不知道如何使用两张图片。它可以是.php或javascript。

Peter

# 2016年12月29日

这在我的Chrome浏览器中运行良好，但不知何故在Firefox和Edge中始终显示相同的图片。有什么想法吗？

Carl Angelo Nievarez

# 2017年4月3日

我可以问一下这个吗？如何使css背景随机化，而不使用PHP而是使用Javascript？

rihana1997

# 2019年7月29日

我想用jquery和bootstrap来实现。我希望每次刷新时都有随机的背景……
你能帮我一下吗？

1. 在DOCTYPE之前

1. CSS 在<head>中

1. 在DOCTYPE之前

1. CSS 在<head>中

评论

发表评论 取消回复

发表评论取消回复