Làm cách nào để có hình ảnh động dưới dạng nền CSS?

Tôi có một div biểu tượng mà tôi muốn sử dụng hình ảnh logo của tôi như là nền tảng cho, chẳng hạn như:Làm cách nào để có hình ảnh động dưới dạng nền CSS?

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

Tuy nhiên, trên một trang cài đặt trong kịch bản của tôi, tôi muốn có một trường nhập văn bản để chỉ định URL hình ảnh cho hình nền.

Làm thế nào tôi có thể thiết lập hình nền cho thẻ div này như URL hình ảnh đầu vào mà không cần phải làm:

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

(Kịch bản được viết bằng PHP)

Nguồn

2012-07-03 JROB

Có phải liên tục không? Nó có thể được thực hiện với javascript/jquery hoặc hiện nó phải được thực hiện với php? – chrisgooley

Tôi không muốn sử dụng javascript – JROB

Điều này rất đơn giản. Tất cả bạn cần làm là một trong hai đặt này trong <head>:

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

Hoặc bạn chỉ có thể sử dụng inline style thuộc tính và xác định tài sản background-image CSS như câu trả lời khác đã gợi ý:

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

Bây giờ, bạn sẽ muốn đảm bảo rằng trước khi bạn cho phép nó được gửi rằng nó không chứa HTML hoặc bất cứ điều gì khác, chỉ các ký tự URL hợp lệ. Và bạn cũng nên thoát khỏi nó để ai đó không thể nhập này vào đầu vào URL:

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

và cắm lên trang.

Tôi tưởng tượng bạn đang đặt url hình ảnh này vào cơ sở dữ liệu, vì vậy hãy luôn nhớ những gì đã xảy ra với Bobby Tables 'hồ sơ trường học (thoát khỏi đầu vào).

Nguồn

2012-07-03 03:41:04 Nathan

Nhưng tốt nhất không nên sử dụng các tệp CSS cho bộ nhớ cache và tốc độ trang web? Tôi nghĩ phong cách nội tuyến là xấu. –

@JordanCarter Có, tệp CSS là tốt nhất cho bộ nhớ đệm và tốc độ trang web. Nhưng bạn có thể sẽ không thực sự muốn phần này được lưu trữ, vì URL nền là một biến và do đó có thể/sẽ thay đổi. Trong trường hợp này, tôi nghĩ rằng các kiểu nhúng là tốt, miễn là toàn bộ biểu định kiểu không được nhúng trong trang web. – Nathan

Tôi nghĩ rằng bạn có thể đặt nền hình ảnh động sử dụng javascript như được đưa ra here.

Nếu bạn không thích sử dụng javascript, tại sao bạn không thể sử dụng thuộc tính nội tuyến style.
cũ

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

Nguồn

2012-07-03 03:02:26

Bạn có thể cần phải tạo ra các css từ một kịch bản PHP (phần nâng cao), hoặc sử dụng phong cách nội tuyến để làm các trick. Ví dụ:

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

Đây là cực kỳ không an toàn, nhưng câu trả lời ngắn gọn nhất mà tôi có thể cung cấp ..

Nguồn

2012-07-03 03:06:25

Làm thế nào để "vô cùng bất an" này? Chỉ cần tự hỏi ... – Nathan

PHP injection. Chỉ cần thoát khỏi dữ liệu của bạn. –

Ồ, vâng ... bất kỳ ai không thoát dữ liệu do người dùng nhập (và dữ liệu đầu vào, rất có khả năng URL sẽ được lưu trữ trong đó) nên tự học về [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>

Đó là hoàn toàn js và jQuery, vì tôi không biết PHP, nhưng đó là một giải pháp!

Nguồn

2012-07-03 03:39:19 Chad

Làm cách nào để có hình ảnh động dưới dạng nền CSS?

Trả lời

Các vấn đề liên quan