如何將動態圖像作爲CSS背景？

我有，我想用我的標誌圖像爲背景的一個標誌DIV，如：如何將動態圖像作爲CSS背景？

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

然而，在我的腳本設置頁面上，我想有一個文本輸入字段指定背景圖片的圖片網址。

我如何設置背景圖片爲這個div作爲輸入圖像的URL，而不必做：

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

（腳本是用PHP）

來源

2012-07-03 JROB

它是否必須持久？可以用javascript/jquery完成，還是必須用php完成？ – chrisgooley

我不喜歡使用javascript – JROB

這很簡單。所有你需要做的就是要麼把這個在<head>：

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

或者你可以簡單地使用內聯style屬性和定義background-image CSS屬性像其他答案建議：

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

現在，您需要確保在允許提交不包含HTML或其他任何內容之前，只允許有效的URL字符。而且你還要逃避它所以有人不能進入網址輸入此：

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

和擡高的頁面。

我想你是把這個圖像網址放到一個數據庫中，所以一定要記住Bobby Tables'學校記錄發生了什麼（逃避輸入）。

來源

2012-07-03 03:41:04 Nathan

但不是最好使用CSS文件緩存和網站速度？我認爲內聯樣式很糟糕。 –

@JordanCarter是的，CSS文件最適合緩存和網站速度。但你可能不會真的想要這部分緩存，因爲後臺URL是一個變量，因此可以/將會改變。在這種情況下，我認爲嵌入式樣式很好，只要整個樣式表沒有嵌入到網頁中即可。 – Nathan

我想你可以設置背景圖像動態使用JavaScript給出here。

如果您不喜歡使用javascript，爲什麼不能使用內聯style屬性。
前

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

來源

2012-07-03 03:02:26

你要麼需要生成從PHP腳本（有點高級）的CSS，或使用內嵌樣式做的伎倆。例如：

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

這是令人難以置信的不安全，但最簡潔的答案，我可以給..

來源

2012-07-03 03:06:25

這是如何「令人難以置信的不安全」？只是想知道... – Nathan

PHP注入。只是逃避你的數據。 –

噢，是的......任何不逃避用戶輸入數據（和數據庫輸入，這很可能是這個圖像的URL將被存儲在什麼地方）應該教育自己關於[Bobby Tables]（http：///bobby-tables.com/）。 – Nathan

<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-03 03:39:19 Chad

如何將動態圖像作爲CSS背景？

回答

相關問題