如何动态更改CSS

Question

我需要管理员能够更改/更新网站的横幅。

这是横幅代码

<div class="containertop">This depends on the background of the div</div>

这是该的CSS

.containertop
{
     width:1000px;
     height:300px;  
     **background:url(../images/1.png) no-repeat center;**
     margin: 0 auto;
     margin-top: 40px;
}

我想发生的事情与Facebook封面照片相同。 当上传新横幅时，CSS将被更新（类似这样）。 但是，当然，必须从数据库中获取新横幅。

所以我认为CSS会变成这样：

提取保存的标语源，然后：

background:url(<?php echo $row['image']; ?>);

但是我可以在CSS txt中建立与数据库的PHP连接（包括“ dbname.php”）吗？

Answer 1

没有什么可以阻止您使用PHP生成的CSS。 那很容易。

只需像这样启动您的php文件：

<?php
header("Content-Type: text/css");

Answer 2

您可以在加载php文件时设置containertop背景。

<?php
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>"
?>

这将设置从数据库获取的背景。

Answer 3

我同意本。 如果您在页面中做了一些嵌入式css部分，则可以在其中放置.containerTop css代码。 然后，将您的代码放在页面中。 因此，在您的实际网页中，输入以下内容：

<style type="text/css">
.containertop{
width:1000px;
height:300px;  
background:url(<?php echo $row['image']; ?>);
margin: 0 auto;
margin-top: 40px;
}
</style>

当然，您的背景网址只有在重新加载后才会更新。 如果您决定采用这种方式，请不要忘记从现有CSS中删除.containerTop定义。 说了这么多，我真的很喜欢dystroy的回答。 非常好。 我从来没有想过这样做。

Answer 4

好了，您可以使用jQuery更改/覆盖CSS文件。

范例-

$('.containertop').css('backgroud','url(images/change.jpg) repeat');

要么

$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');