使用PHP选择一个随机图像,使其成为特定<div>的背景图像

时间:2017-09-17 20:26:53

标签: php html css

在最近的一个HTML项目中,我正在尝试使用PHP在每次加载页面时进行背景图像更改。我知道CSS和HTML,但不知道PHP。

由于我是PHP的新手,我决定使用PHP搜索如何在文件夹中选择随机图像,并使用解决方案来解决StackOverflow中的this问题。

PHP代码似乎有效,因为页面不会抛出任何错误。图像未显示为div的背景(不显示图像)。

这是一段代码:

    <?php
        $directory = "/images/headerBg/";
        $filecount = 0;
        $files = glob($directory . "*");

        if ($files){
            $filecount = count($files);
        }

        $IMG = mt_rand(1, $filecount);
    ?>

    <style type="text/css">
        .bgImg {
            background-image: url("/images/headerBg/<?php echo $IMG ?>.jpg");
        }
    </style>

    <div class="bgImg">
        <!-- The div with the changing background -->
    </div> 

注1 :文件被命名为0.jpg到最后一个(n.jpg)。

注意2 :我无法使用数组,因为我会在途中添加更多照片。

2 个答案:

答案 0 :(得分:2)

您正在尝试显示您生成的文件的随机索引,而不是文件本身。只有当您搜索的目录中的文件名都是1.jpg, 2.jpg, etc...

的格式时,您的代码才有效

更改

background-image; url("/images/headerBg/<?php echo $IMG ?>.jpg");

background-image: url("/images/headerBg/<?php echo $files[$IMG] ?>");

答案 1 :(得分:0)

你可以用glob做到这一点但是如果你需要一些性能,那么每次加载你的页面时阅读整个目录并不是一个好主意。

所以在你的情况下,我更喜欢带有文件名的数组。并随机选择阵列中的图像。

$myBgImageArray = [
    0 => '123123.jpg',
    1 => '212312.jpg',
] 

<style type="text/css">
    .bgImg {
        background-image; url("/images/headerBg/<?php echo $myBgImageArray[mt_rand(0, count($myBgImageArray) - 1)]; ?>");
    }
</style>
像这样的事情。出于安全原因,最好以静态方式定义名称和其他内容。不要使用可以操作的文件名或者用户可以使用残酷的名称或空格放置图像的文件名。这可能会破坏您的页面并导致错误。