随机 CSS 背景图片答案

【问题标题】：Random CSS background image随机 CSS 背景图片
【发布时间】：2014-10-31 20:23:32
【问题描述】：

我找不到任何适合我的东西，而且由于我是一个剪切和粘贴 html 编辑器（我只知道主要的基本内容），所以我不理解其他大多数帖子。这是我正在使用的网页：http://goo.gl/MgsoX4（我将它托管在保管箱上，因为我还没有完成它）。我的想法是每次刷新/重新加载页面时都会更改背景。我似乎找不到任何适合我的东西。背景的 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图像旋转器，它不会不行！

【问题讨论】：

PHP 无法正常工作，因为您托管在 Dropbox 上，它只提供静态文件。您需要一个运行 PHP 的适当服务器，或者改用 Javascript 之类的客户端语言。
@Steve-Sanders 是对的。您可以尝试使用 javascript 图像旋转器。我喜欢jquery.malsup.com/cycle2
background-image: url("images/overlay.png"), url("../images/1.jpg"); 不会旋转您的图像。这是用于分层背景图像的 CSS3 规范的一部分。
我们生活在什么样的世界里，复制粘贴开发人员可以制作这样的网站。
是的@JakeParis，哈哈，很抱歉粉碎了你的梦想。史蒂夫似乎知道我的秘密

标签： php html css background rotator

【解决方案1】：

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

保持当前的 CSS 以作为后备。然后，您将让 div 看起来像这样：

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

@Steve-Sanders 的评论也是正确的，因为您需要一个实际的服务器来运行 PHP。

【讨论】：

呃，听起来工作量太大了！有没有办法完全不使用 PHP？我的网站上什至没有 php 文件，全是 .html！出于某种原因，我觉得这是我做过的最愚蠢的评论。 @austinthedeveloper

【解决方案2】：

在您的 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>

【讨论】：

我的网页不是基于php，而是html。这有什么区别吗？
@Alejandro 如果您的网页不使用 PHP，那么可以。您提到的问题使用 PHP，所以我认为您的网页可以访问它。您也可以使用 Javascript 来完成。我已经更新了我的答案以表明这一点。
在 head 部分尝试了 javascript。仍然不起作用，它实际上把它搞砸了，看起来很奇怪。现在看看goo.gl/MgsoX4。这就是javascript代码的样子
@Alejandro 您不能将 javascript 专门放在头部。如果你把它放在那里，你必须把它放在某种 ready 函数中，以确保它只执行 after 整个 DOM 被加载。在我的示例中，我将其直接放在了banner 元素下，以确保脚本执行时，该元素已准备就绪。
还是不行！我什么都不懂，我什么都试过了！如果您想亲自尝试，这里有所有文件：dl.dropboxusercontent.com/u/51601633/html5up-alpha.zip

【解决方案3】：

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

【讨论】：

现在试试我的代码我下载了你的文件并更改了 img url 以匹配你的文件结构，我的代码工作得很好，每次你点击 f5 你会得到一个新的背景图像。我注意到您已经在加载 jquery，所以只需省略加载 jquery 的脚本标记，因为您已经在加载它。
糟糕，我恐怕还不够清楚。我想更改横幅图片。标题“Bach CCSS”背后的内容，而不是身体背景。有什么快速解决方法吗？ @Larry-Lane
我修好了！谢谢！成功了！

【解决方案4】：

它不起作用，除非您的页面是 PHP 的。您需要使用 javascript/ajax 来旋转图像。

【讨论】：

【解决方案5】：

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

编辑：将 html 文件的扩展名更改为“php”，使其看起来像“index.php”

【讨论】：

但是，我也尝试从本地主机访问它。也不行。
@Alejandro 将扩展名更改为 php。看看编辑
哦，明白了。这不会搞砸吗？让我试试
@Alejandro 没有。 PHP 扩展仅用于告诉服务器有 PHP 和 HTML，并且所有浏览器都知道 php 文件应该像 html 一样使用

【解决方案6】：

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

在文档类型之前

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

【讨论】：