Php 如何将动态图像作为CSS背景?

Php 如何将动态图像作为CSS背景?,php,css,background,Php,Css,Background,我有一个logo div,我想使用我的logo图像作为背景,例如: .logo { background: #FFF url(images/logo.jpg); } 但是,在脚本的设置页面上,我希望有一个文本输入字段来指定背景图像的图像URL 如何将此div的背景图像设置为输入的图像URL,而无需执行以下操作: <div><img src="/images/logo.jpg" /></div> (脚本是用PHP编写的)我认为可以使用javasc

我有一个logo div,我想使用我的logo图像作为背景,例如:

.logo {
    background: #FFF url(images/logo.jpg);
}
但是,在脚本的设置页面上,我希望有一个文本输入字段来指定背景图像的图像URL

如何将此div的背景图像设置为输入的图像URL,而无需执行以下操作:

<div><img src="/images/logo.jpg" /></div>


(脚本是用PHP编写的)

我认为可以使用javascript动态设置背景图像

如果您不喜欢使用javascript,为什么不能使用内联
style
attribute.


您要么需要从PHP脚本生成css(有些高级),要么使用内联样式来完成这项任务。例:

<div style="background-image: <?php echo $_POST['whateverjpg']; ?>" >
//blah
</div>

var inputct=$('input.inputContent').val();
$('body').css('background','url('+inputC+'));

这完全是js和jQuery,因为我不懂PHP,但它是一个解决方案

这里有两个选项可以动态设置背景图像

  • 将嵌入式样式表放入文档的

  • 注意:在将输入保存到数据库之前,请确保对其进行清理(请参阅)。确保它不包含HTML或任何其他内容,仅包含有效的URL字符、转义引号等。如果不这样做,攻击者可能会向页面中插入代码:

    "> <script src="http://example.com/xss-attack.js"></script> <!--
    

    “>它必须是持久性的吗?它可以用javascript/jquery来完成还是必须用php来完成?我不希望使用javascriptPHP注入。只需转义你的数据。哦,是的……任何不转义用户输入的数据(和数据库输入,这很可能是此图像的URL将存储的内容)的人都可以应该让自己了解一下。但是使用CSS文件来缓存和网站速度不是最好的吗?我认为内联样式不好。@JordanCarter是的,CSS文件最适合缓存和网站速度。但是你可能不会真的想要缓存这部分,因为背景URL是一个变量,因此可以/将要更改。在这种情况下,我认为嵌入样式是最好的可以,只要整个样式表没有嵌入到网页中。
    
    <div style="background-image: <?php echo $_POST['whateverjpg']; ?>" >
    //blah
    </div>
    
    <input type="text" class="inputContent" />
    <script type="text/javascript">
        var inputC = $('input.inputContent').val();
        $('body').css('background', 'url(' + inputC + ')');
    </script>
    
    <style type="text/css">
    .logo {
       background: #FFF url(<?php echo $variable_holding_img_url; ?>);
    }
    </style>
    
    <div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>
    
    "> <script src="http://example.com/xss-attack.js"></script> <!--