將圖像分割爲像素div

我在想如何在瀏覽器中製作一些很酷的圖像效果，而且我知道可能有點遲，因爲HTML5/CSS3不斷向前邁進這一路，但我是想知道實現一個本質上創建div的庫，以便使用背景偏移量來保存圖像的像素，這會帶來什麼內在限制/問題點。很明顯，這會創建很多div，但是如果你想在小圖像上只使用行或列，看起來這不會是不合理的。通過瀏覽器緩存圖像，不必爲每個細分都提出請求，我能看到的唯一其他潛在問題就是定位的處理，我認爲這不會成爲問題。在這一點上，我沒有什麼東西可以阻止像這樣玩這樣的圖像（所以我會！），但是我很好奇，如果有什麼我在這裏忽略的東西會讓這個想法變得不可行，特別是任何棘手的事情，我應該知道的。謝謝:)將圖像分割爲像素div

編輯：試了這個，它似乎是我的代碼中有一個固有的問題或問題（對不起，它只是玩弄），與任何圖像使用，你會看到不同之處。

var lpath = "images/logo.png" 
window.onload = function(){ 
    console.log('test'); 
    $('body').append("<img id='logo' style='display:none' src="+lpath+">"); 
    console.log($('#logo').width()); 
    console.log('hello'); 
    var logod = $('<div></div>') 
           .addClass('i') 
           .width($('#logo').width()) 
           .height($('#logo').height()) 
           .css('background-image','url('+lpath+')') 
    $('body').append(logod); 
    for(var i = 1; i <= $('#logo').height(); i++){ 
     var cons = $("<div></div>") 
           .height(1) 
           .width($('#logo').width()) 
           .css('background','url('+$('#logo').attr('src')+') no-repeat 0 ' + (-i)); 
     $('body').append(cons); 
    }                 
}

enter image description here