0

我找不到任何适合我的东西，而且由于我是一个剪切和粘贴 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图像旋转器，它不起作用！

4

6 回答 6

1

在您的 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-31T20:29:27.097 回答
1

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

保持css你目前拥有它的方式作为后备。然后你会让 div 看起来像这样：

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

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

于 2014-10-31T20:29:46.003 回答
0

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

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

于 2014-10-31T20:36:14.593 回答
0

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

于 2014-10-31T20:41:46.550 回答
0

如果要使用 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-31T20:50:36.787 回答
-1

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

在文档类型之前

<?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-04T07:26:33.217 回答