随机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图像旋转器，它不会工作！

来源

2014-10-31 Alex

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

如果您想要使用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>

来源

2014-10-31 20:50:36

一样使用不起作用......惊喜...... :( – 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>

来源

2014-10-31 20:29:27 Kyle

我的网页不是基于php，它是html。这有什么区别吗？ – Alex 2014-10-31 20:32:29

@Ajjandro如果你的网页不使用PHP，那么是的。你提到的问题使用PHP，所以我认为你的网页可以访问。你也可以用Javascript来做到这一点。我已经更新了我的答案以表明这一点。 – Kyle 2014-10-31 20:39:19

尝试在头部的JavaScript。它仍然不起作用，它实际上弄乱了它，看起来很奇怪。现在看看它http://goo.gl/MgsoX4。这就是它看起来像JavaScript代码 – Alex 2014-10-31 20:45:54

您遇到的问题是您正试图在样式表内定义图像。为了创建一个随机背景图像，它必须作为内联样式附加。

保持css你目前如何拥有它的后备。然后，您将有格是这个样子：

<div id="banner" style="background-image:url("images/newImage.jpg");"></div>

@史蒂夫·桑德斯评论也是正确的，你需要一个实际的服务器来运行PHP。

来源

2014-10-31 20:29:46 austinthedeveloper

呃，这听起来像很多工作！有没有办法不使用PHP？我甚至没有在我的网站上有一个php文件，它都是.html！出于某种原因，我觉得这是我做出的最愚蠢的评论。 @austinthedeveloper – Alex 2014-10-31 20:35:41

PHP需要一个可以执行代码的服务器。 Dropbox不执行代码，因为它不应该。相反，它只是提供html上传的方式，如果您检查DOM，您将看到php标签。当由执行php的适当服务器提供服务时，标签将被删除。

编辑：修改HTML文件的扩展名“PHP”，这样它看起来像“指数PHP。”

来源

2014-10-31 20:36:14 DividedByZero

但我再次尝试从我的本地主机访问它。也不起作用。 – 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来旋转图像。

来源

2014-10-31 20:41:46

-1

一个简单的解决方案，这可能是，

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;

来源

2016-11-04 07:26:33 user1515361

请解释你的答案如何解决问题... – Moumit 2016-11-04 07:47:45

随机CSS背景图片

回答

相关问题