1

背景画像が 2 つある Web サイトを作成していますが、そのうちの 1 つは常に同じです。

background-image: url("../images/centre-image.jpg");

もう 1 つは php を介して生成され、ランダムに背景画像を表示します。

    <?php
      $bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.jpg', ); // array of filenames

      $i = rand(0, count($bg)-1); // generate random number size of the array
      $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
    ?>

<img src="images/background-images/<?php echo $selectedBg; ?>" class="bg">

画面のサイズに関係なく、最初の背景をDIVのフルサイズにするのは簡単でした：

div.centre-options {
    background-size: 100% auto;
}

ただし、ランダムに生成された画像に同様の CSS を追加しようとしても機能せず (完全な jpg サイズで表示されてから繰り返されるだけです)、問題を解決する方法がわかりません。

4

1 に答える 1

2

私が知る限り、生成された画像は背景としてではなく、表示する画像として設定されているため、背景のスタイリングを適用することはできません。

イメージタグにスタイリングを直接適用するか、つまり2つのことができます

img.bg{
width:100%;
height:100%;
}

または、要素を作成し、生成された画像をそのスタイリングに追加すると、次のようになります。

 <?php
      $bg = array('large-top1.jpg', 'large-top2.jpg', 'large-top3.jpg', 'large-top4.jpg', 'large-top5.jpg', ); // array of filenames

      $i = rand(0, count($bg)-1); // generate random number size of the array
      $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
    ?>
<style>
div.bg{
background-image: url("images/background-images/<?php echo $selectedBg; ?>");
background-size: 100% auto;
}
</style>
<div class="bg"></div>

head タグの間にスタイルを配置することをお勧めします

于 2013-04-22T16:30:41.843 に答える