Как получить динамическое изображение в качестве фона CSS?

У меня есть логотип, который я хочу использовать для моего логотипа в качестве фона, например:

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

Однако, на странице настроек в моем script, я хотел бы иметь текстовое поле ввода, чтобы указать, какой URL-адрес изображения для фонового изображения.

Как установить фоновое изображение для этого div как URL-адрес введенного изображения без необходимости:

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

(script написан на PHP)

Ответ 1

Это очень просто. Все, что вам нужно сделать, это либо поставить его в <head>:

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

Или вы можете просто использовать встроенный атрибут style и определить свойство CSS background-image, как и другие ответы:

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

Теперь вам нужно убедиться, что перед тем, как вы разрешите ему представить, что он не содержит HTML или что-то еще, только действительные URL-адреса. И вы также должны избежать его, чтобы кто-то не смог ввести его в URL-адрес:

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

И поднимите страницу.

Я предполагаю, что вы помещаете этот URL-адрес изображения в базу данных, поэтому всегда помните, что произошло с Bobby Tables" школьные записи (сбежать от входа).

Ответ 2

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

Это полностью js и jQuery, потому что я не знаю PHP, но это решение!

Ответ 3

Вам нужно либо сгенерировать css из PHP script (несколько продвинутый), либо использовать встроенные стили, чтобы сделать трюк. Пример:

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

Это невероятно неуверенно, но самый краткий ответ, который я могу дать.

Ответ 4

Я думаю, что вы можете установить фоновое изображение динамически, используя javascript, как указано здесь.

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

Если вы предпочитаете не использовать javascript, почему вы не можете использовать встроенный атрибут style.
ех

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