使用jquery and javascript 將<img>元素 轉為background

在cms系統上，往往改 background-img 必須要在你寫前台code那，改寫圖片路徑。

而現在這個方式能將你的隨便上的一篇 node 或者 block 上的圖片，改寫為你的background!

問題一：將一區塊的<img>元素轉成一區塊的background

step1:

宣告一個變數

使用 jquery .attr(); 的 src 的屬性，就可以將你指定的圖片入徑的值給帶出來

var v = $("#yourblock img").attr("src");

step2:

將step1 所宣告的變數，帶入 jquery .css(); 的 background-img的圖片入徑裡

 $("#yourblock").css({'background-image': 'url(' + v + ')',});

只需這兩個step就可將step1指定<img>標籤，變成step2裡指定block的background了！！

問題二：將多個<li>元素裡的<img>元素，轉成每個<li>裡的background

step1:

先將你想要指定的block的<li>元素宣告為一個變數

var items = jQuery('.youblock>li');

step2:

使用javascript裡的for迴圈，宣告一個起始值的變數為i ,在使用jquery .length 帶出在step1變數宣告數量的值，再去下他迴圈的條件

宣告的i從0開始，假設低於step1宣告變數items的length的值，就+1，假設高於step1宣告變數items的length的值就離開這個迴圈

for (var i = 0; i < items.length; ++i) {};

step3:

將變數i帶入items變數的陣列，在使用jquery .css(); 就能在對應的<li>元素的<img>，下對應的background-img

for (var i = 0; i < items.length; ++i) {
    $(items[i]).css('background-image', 'url(' + $(items[i]).find('img').attr('src') + ')');
}