将图像分割为像素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