图片破碎 （1） 分割图片
最终效果：
完整代码：
<!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .boomCont{ width: 400px; height: 220px; position: absolute; top: 0px;right: 0px; bottom: 0px;left: 0px; margin: auto; overflow: hidden; border: 1px solid red; /*display: flex;*/ } .test-img{ display: none; } .item-ball{ position: relative; top: 0px;left: 0px; float: left; background: url("test-img/t1.jpg"); /*background-size:500px 400px;*/ /*background-color: black;*/ border-radius: 50%; } .item-ball:nth-child(1){ display: none; } </style> </head> <body> <div class="boomCont" id="boomCont"> <div class="item-ball"></div> <img class="test-img" src="test-img/t1.jpg" alt=""> </div> </body> <script type="text/JavaScript"> var box=document.getElementById('boomCont'), ball=document.getElementsByClassName('item-ball')[0], frag=document.createDocumentFragment(), dia=10, //直径 rNum=parseInt(box.getBoundingClientRect().height/dia), cNum=parseInt(box.getBoundingClientRect().width/dia) ; ball.style.width=dia+'px';ball.style.height=dia+'px'; // ball.style.backgroundPosition='0px 0px'; for(var r=0;r<rNum;r++){ for (var c=0;c<cNum;c++){ var cl=ball.cloneNode(true); ball.style.backgroundPosition='-'+c*dia+'px '+'-'+r*dia+'px'; frag.appendChild(cl); } } box.appendChild(frag); console.log(box.getBoundingClientRect().top,box.getBoundingClientRect().left,box.getBoundingClientRect().width); </script> </html>