随机CSS背景图片
我找不到任何适用于我的东西,而且由于我是剪切粘贴的HTML编辑器(我只知道主要的基本内容),所以我不了解大多数其他帖子。这是我正在使用的网页:http://goo.gl/MgsoX4(我在Dropbox上托管它,因为我还没有完成它)。每次刷新/重新加载页面时,我都有过更改背景的想法。我似乎无法找到任何适合我的东西。为背景的CSS如下:随机CSS背景图片
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("images/overlay.png"), url("../images/1.jpg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
每当我改变“../images/1.jpg”到“../images/2.jpg”,背景将变为第二JPG,但我试过一个PHP图像旋转器,它不会工作!
如果您想要使用JQuery,您可以将此代码粘贴到您的html页面的头部分或您的页面的结束标记之前。
我下载了你的文件,并改变了IMG的文件路径,它对我来说工作得很好。每次我按F5键,你会得到一个新的背景图像
<!-- place in head element or before closing--> <!-- </body> tag of html page -->
<!--load JQuery first-->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//the highest number of the image you want to load
var upperLimit = 10;
//get random number between 1 and 10
//change upperlimit above to increase or
//decrease range
var randomNum = Math.floor((Math.random() * upperLimit) + 1);
//change the background image to a random jpg
//edit add closing) to prevent syntax error
$("body").css("background-image","url('images/" + randomNum + ".jpg')");//<--changed path
});
</script>
一样使用不起作用......惊喜...... :( – Alex 2014-10-31 20:53:08
现在试试我的代码我下载了你的文件并改变了img url来匹配你的文件结构,而且我的代码在你每次打f5时都工作得很好,你会得到一个新的背景图像。我注意到你已经加载了jquery,所以只是省略了加载jquery的脚本标记,因为你 – 2014-10-31 23:07:21
哎呀,恐怕我还不够清楚,我想改变BANNER的图片,标题“Bach CCSS”背后是什么,而不是身体的背景,有什么快速解决方法?@Larry -Lane – Alex 2014-11-01 10:37:19
在您的PHP页面的内部,head
标签内,您可以更改#banner
样式。因为CSS是层叠,这样做将覆盖外部样式表
my_style_sheet.css
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
my_page.php
<head>
<link rel="stylesheet" type="text/css" href="my_style_sheet.css" />
<style type="text/css">
#banner {
background-image: url('images/<?php echo rand(0, 5); ?>.jpg');
}
</style>
JavaScript示例
里面什么...
<div id="banner"></div>
<script type="text/javascript">
document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>
您遇到的问题是您正试图在样式表内定义图像。为了创建一个随机背景图像,它必须作为内联样式附加。
保持css你目前如何拥有它的后备。然后,您将有格是这个样子:
<div id="banner" style="background-image:url("images/newImage.jpg");"></div>
@史蒂夫·桑德斯评论也是正确的,你需要一个实际的服务器来运行PHP。
呃,这听起来像很多工作!有没有办法不使用PHP?我甚至没有在我的网站上有一个php文件,它都是.html!出于某种原因,我觉得这是我做出的最愚蠢的评论。 @austinthedeveloper – Alex 2014-10-31 20:35:41
PHP需要一个可以执行代码的服务器。 Dropbox不执行代码,因为它不应该。相反,它只是提供html上传的方式,如果您检查DOM,您将看到php标签。当由执行php的适当服务器提供服务时,标签将被删除。
编辑:修改HTML文件的扩展名“PHP”,这样它看起来像“指数PHP。”
但我再次尝试从我的本地主机访问它。也不起作用。 – Alex 2014-10-31 20:37:29
@Alejandro将扩展名更改为php。看看编辑 – DividedByZero 2014-10-31 20:38:37
哦,呃。这不会把它搞砸吗?让我试试 – Alex 2014-10-31 20:41:04
它不会工作,除非你的网页是在PHP。您需要使用javascript/ajax来旋转图像。
一个简单的解决方案,这可能是,
DOCTYPE
<?php
$bgimage = array('originals/background-01.png', 'originals/background-02.png', 'originals/background-03.png', 'originals/background-04.png', 'originals/background-05.png', 'originals/background-06.png');
$i = rand(0, count($bgimage)-1);
$mybgimage = "$bgimage[$i]";
?>
之前和风格呼叫
background: url(images/<?php echo $mybgimage; ?>) no-repeat;
请解释你的答案如何解决问题... – Moumit 2016-11-04 07:47:45
PHP内不起作用,因为您在Dropbox上托管,Dropbox只提供静态文件。您需要一个运行PHP的正确服务器,或者使用JavaScript等客户端语言。 – 2014-10-31 20:27:02
@史蒂夫桑德斯是对的。你可以尝试一个JavaScript图像旋转器。我喜欢http://jquery.malsup.com/cycle2/ – JakeParis 2014-10-31 20:29:19
'background-image:url(“images/overlay.png”),url(“../ images/1.jpg”);'不会漫游你的图片。这是用于分层背景图像的CSS3规范的一部分。 – Gary 2014-10-31 20:30:34