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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (94)

假设我的站点有一个预加载程序屏幕。我想在每次网站加载时随机设置它。我想做背景属性的CSS文件随机使用php。下面是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中设置背景是否有错误?

提问于
用户回答回答于

问题在于基础_xampp中的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类。

用户回答回答于

在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;

扫码关注云+社区

领取腾讯云代金券