使用php在head标记内设置css属性
使用php在head标记内设置css属性
提问于 2018-07-30 00:35:44
假设我的网站有一个预加载器屏幕。我想在每次网站加载时随机设置它。我想让我的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中设置背景有什么错误吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-30 02:46:21
问题出在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类
Stack Overflow用户
发布于 2018-07-30 00:58:20
您缺少将引号放入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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51582371
复制相关文章
相似问题
腾讯云开发者
