Question

假设我的网站有一个预加载器屏幕。我想为网站每次加载随机设置。我想使用php将CSS文件的 background 属性设为随机。这是css文件的演示代码：

<style>
   .se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;

   <?php
    $number=rand(1,4);
    $url=base_url('media');
    if($number==1)
    {
        echo "background:"."url(". $url."/images/loader-64x/infinity1.gif) center no-repeat #fff;";
    }
    if($number==2)
    {
        echo "background:"."url(". $url."/images/loader-64x/infinity2.gif) center no-repeat #fff;";

    }
    if($number==3)
    {
        echo "background:"."url(". $url."/images/loader-64x/infinity3.gif) center no-repeat #fff;";
    }
    if($number==4)
    {
          echo "background:"."url(". $url."/images/loader-64x/infinity4.gif) center no-repeat #fff;";
    }   
?>
}
</style>

我只想使背景属性每次都不同。但是我认为它不起作用，因为我根本没有任何预加载器屏幕。在php中设置背景是否有错误？

Answer 1

您缺少在CSS代码中加上引号的功能。例如代码

echo "background:"."url(". $url."/images/loader-64x/infinity1.gif) center no-repeat #fff;";

将生成

"background": url(something/images/loader-64x/infinity1.gif) center no-repeat #fff;

相反，您需要

echo "background:"."url(\"". $url."/images/loader-64x/infinity1.gif\") center no-repeat #fff;";

将会生成

"background": url("something/images/loader-64x/infinity1.gif") center no-repeat #fff;

Answer 2

问题出在xampp中的base_url函数中。如果您将图片放置在正确的位置，请改用以下代码，并且对我来说效果很好

<style>
    .se-pre-con{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    <?php
    $number=rand(1,2);
    $url='media';
    if($number==1)
    echo "background:url('".$url."/images/loader-64x/infinity1.gif') center no-repeat #fff;";
    else if($number==2)
        echo "background:url('".$url."/images/loader-64x/infinity2.gif') center no-repeat #fff;";
    ?>
    }
</style>

但是我有更好的解决方案，使用html而不是css玩php

<html>
<head>
<style>
   .se-pre-con{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    }
    .bg1{
        background:url('media/1.jpg') center no-repeat #fff;
    }
    .bg2{
        background:url('media/2.jpg') center no-repeat #fff;
    }
</style>
</head>
<body>
<div class="se-pre-con <?php $arr=array('bg1','bg2'); echo $arr[array_rand($arr)];?>"></div>
Hello World
</body>
</html>

其中bg1和bg2是为不同背景创建的类，并为预加载器div选择一个随机的bg类

使用PHP在head标签内设置css属性

2 个答案: