一月 4, 2016 | 前端與Vue

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

<p>在cms系統上,往往改 background-img 必須要在你寫前台code那,改寫圖片路徑。</p> <p>而現在這個方式能將你的隨便上的一篇 node 或者 block 上的圖片,改寫為你的background</p>

在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') + ')');
}