0

私はカット アンド ペーストの html エディターなので (主な基本的なことしか知らない)、他の投稿のほとんどを理解していません。これは、私が作業している Web ページです: http://goo.gl/MgsoX4 (まだ完成していないため、Dropbox でホストしています)。ページを更新/リロードするたびに背景を変更するという考えがありました。自分に合ったものが見つからないようです。背景の 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」に変更するたびに、背景が 2 番目の jpg に変更されますが、php 画像回転子を試してみましたが、うまくいきません!

4

6 に答える 6

1

PHP ページ内のタグ内で、スタイルheadを変更できます。#bannerCSS はカスケードであるため、これを行うと、外部スタイル シート内のすべてが上書きされます。

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>

PHPを実行するには実際のサーバーが必要になるという点で、@ Steve-Sandersのコメントも正しいです。

于 2014-10-31T20:29:46.003 に答える
0

JQuery を使用する場合は、このコードを HTML ページの head セクションまたはページの終了タグの直前に貼り付けることができます。

私はあなたのファイルをダウンロードし、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 に答える
0

PHP には、コードを実行できるサーバーが必要です。Dropbox はコードを実行しません。代わりに、アップロードされた方法で html を提供するだけです。DOM をチェックすると、php タグが表示されます。php を実行する適切なサーバーによって提供されると、タグは削除されます。

編集: html ファイルの拡張子を「 php」に変更して、「index.php」のようにします。

于 2014-10-31T20:36:14.593 に答える
-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 に答える