CSS arka planı olarak dinamik görüntü nasıl elde edilir?</p> <pre><code>.logo { background: #FFF url(images/logo.jpg); } </code></pre> <p>Ancak benim komut bir ayarları sayfasında, bir metin giriş alanını zorunda istiyorum:

Ben gibi ben için arka plan olarak benim logo resmi kullanmak istediğiniz bir logo div var Resim URL'sinin arka plan resmi için ne olduğunu belirtin. Bunun için arka plan resmi ayarlayabilirsiniz nasılCSS arka planı olarak dinamik görüntü nasıl elde edilir?</p> <pre><code>.logo { background: #FFF url(images/logo.jpg); } </code></pre> <p>Ancak benim komut bir ayarları sayfasında, bir metin giriş alanını zorunda istiyorum:

yapmak zorunda kalmadan girilen goruntu URL olarak div:

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

(PHP ile yazılmış olan)

kaynak

2012-07-03 JROB

Kalıcı olmalı mı? Javascript/jquery ile yapılabilir mi yoksa php ile mi yapılmalı? – chrisgooley

javascript kullanmamayı tercih ederim – JROB

Bu çok basit. ,

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

Şimdi:

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

Veya sadece satır içi style özelliğini kullanabilirsiniz ve diğer cevaplar ettiler gibi background-image CSS özelliğini tanımlamak: Yapmanız gereken tek şey <head> bu konur ya 'un HTML veya başka bir şey içermediği, yalnızca geçerli URL URL'sini içermediğinden emin olmak için, izin vermeniz gerekir.

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

Ve sayfa yukarı jack: Ve ayrıca o böylece birileri URL girişine bu giremez kaçmak gerekir.

Bu görüntü URL'sini bir veritabanına koyduğunuzu hayal ediyorum, bu nedenle her zaman Bobby Tables 'okul kayıtlarına (girişten kaçış) ne olduğunu hatırlayın.

kaynak

2012-07-03 03:41:04 Nathan

Ancak önbellek ve site hızı için CSS dosyalarını kullanmak en iyisi değil mi? Satır içi stillerin kötü olduğunu düşündüm. –

@JordanCarter Evet, CSS dosyaları önbelleğe alma ve site hızı için en iyisidir. Ancak, arka plan URL'si bir değişken olduğundan ve böylelikle değişebileceğinden, muhtemelen bu bölümün önbelleğe alınmasını istemezsiniz. Bu durumda, tüm stil sayfasının web sayfasına gömülmediği sürece gömülü stillerin iyi olduğunu düşünüyorum. – Nathan

Sana arka plan ayarlayabilirsiniz düşünüyorum görüntü here verilen javascript kullanarak dinamik olarak. javascript kullanmamayı tercih ederse

, neden satır içi style özelliğini kullanamaz.
ex

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

kaynak

2012-07-03 03:02:26

Ya (biraz gelişmiş) bir PHP komut dosyasından css oluşturabilir veya hile yapmaya satır içi stilleri kullanmak gerekir. Ör:

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

Bu inanılmaz derecede güvensiz olduğunu, ancak en kısa cevap verebilirim ..

kaynak

2012-07-03 03:06:25

Bu nasıl "inanılmaz derecede güvensiz"? Sadece merak ediyorum ... – Nathan

PHP enjeksiyon. Sadece verilerinden kaç. –

Oh, evet ... kullanıcı tarafından girilen veriden (ve muhtemelen bu resmin URL'sinin ne şekilde saklanacağı veritabanı girişleri) kaçmayan herkes [Bobby Tables] hakkında kendilerini eğitmelidir (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>

Ben PHP bilmiyorum, ama bir çözüm olduğu için, tamamen js ve jQuery var!

kaynak

2012-07-03 03:39:19 Chad

CSS arka planı olarak dinamik görüntü nasıl elde edilir?</p> <pre><code>.logo { background: #FFF url(images/logo.jpg); } </code></pre> <p>Ancak benim komut bir ayarları sayfasında, bir metin giriş alanını zorunda istiyorum:

cevap

İlgili konular